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' οnclick='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 linkcolumns.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" parameterroute.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 orderreturn View(order); }

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的[4]Telerik Grid 简单使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。