[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' ο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);
}