[4]Telerik Grid 簡單使用方法

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);
}