1.columns
<% Html.Telerik().Grid(Model) .Name("Orders") .Columns(columns => { //绑定列名 columns.Bound(o => o.OrderID); //隐藏字段 columns.Bound(o => o.OrderID).Hidden(true); //绑定列标题 columns.Bound(o => o.OrderDate).Title("Order"); //添加样式 columns.Bound(o => o.OrderID).HeaderHtmlAttributes(new {@class="order-id-column"}}); //设置列宽 columns.Bound(o => o.OrderID).Width(200);
//自定义控件(以下为复选框，自定义了列标题为复选框，可供全选)
columns.Bound(o => o.OrderID)
.ClientTemplate("<input type='checkbox' name='chkBox' value='<#=ID#>' />")
.HeaderTemplate("<input type='checkbox' name='checkeAll' value='all' onclick='checkeAll(this)' />");
//时间格式化
columns.Bound(o => o.OrderDate).Format("{0:dd/MM/yyyy}");
//格式化
columns.Bound(c => c.CustomerID).Format( "<img src='>" + Url.Content("~/Content/Images/Customers/")
+ "{0}.jpg' alt='{0}' />" ).Encoded(false).Title("Avatar"); //Template column which shows an action link columns.Template(o => { %> <%= Html.ActionLink("Edit", "Home", new { id = o.OrderID }) %> <% }).Title("Edit"); }) .Render(); %>
js
//列标题的复选框全选实现 function checkeAll(e) { $("input[name='chkBox']").attr("checked", e.checked); }
2.Paging 分页
<%= Html.Telerik().Grid(Model) .Name("Grid") .Pageable() //1.启用分页功能
.Pageable(pager => pager.PageTo(10)) //2.设置按10条分页
.Pageable(pager => pager.Enabled((bool)ViewData["enablePaging"]))
.Pageable(pager => pager.PageSize(20))
.Pageable(pager => pager.Position(GridPagerPosition.Top))
.Pageable(pager => pager.Total((int)ViewData["total"]))
.Pageable(pager => pager.Style(GridPagerStyles.PageInput | GridPagerStyles.Numeric))
%>
3. 自定义
//----Defining a custom server command <%= Html.Telerik().Grid<Order>(Model) .Name("Grid") .Columns(columns => { columns.Command(commands => { // Declare a custom command named "showDetails" commands.Custom("showDetails") // Set the text which the command button will display .Text("Show details") // Specify the action method which the command will invoke .Action("ShowDetails", "Home") // Specify which properties of the data item will be passed as action method arguments .DataRouteValues(route => { // Send the OrderID property of the data item as "orderID" parameter route.Add(o => o.OrderID).RouteKey("orderID"); }); }) }) %> //----Handling the custom command // The "orderID" argument will come from the OrderID property. Defined via DataRouteValues public ActionResult ShowDetails(int orderID) { var northwind = new NorthwindDataContext(); // Get the order by "orderID" var order = northwind.Orders.FirstOrDefault(o => o.OrderID == orderID); // Display a some view which will use the order return View(order); }
