电网概述

网格是Telerik UI for ASP。NET MVC，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

Telerik UI Grid HtmlHelper for ASP。NET MVCis a server-side wrapper for the Kendo UI Grid widget.

Grid是一个功能强大的控件，用于以表格格式显示数据。它提供了执行数据操作的选项，如分页、排序、筛选、分组和编辑，这些操作决定了数据的显示和操作方式。Grid通过使用jQuery DataSource组件的Kendo UI支持数据绑定到本地和远程数据集。

• Grid HtmlHelper的演示页面

提前阅读

由于Grid支持的功能众多，因此它是Telerik UI组件中最复杂的。为了在开始使用它之前获得更大的信心，请确保您熟悉以下概念:

• 数据源- DataSource是关键套件组件之一。它是使用本地或远程数据的抽象，也是理解Grid如何工作的关键概念。
• 远程CRUD操作-本节详细介绍通过数据源发出的HTTP请求从远程数据服务检索数据并将数据提交给远程数据服务的场景。
• 远程数据绑定-这篇文章提供了关于服务器过滤、分页和Grid的其他特性的信息。

初始化网格

下面的示例演示如何定义Grid。

@(Html.Kendo(). grid () . name ("grid") . columns (columns => {columns. grid)。绑定(c => c. contactname).Width(140);列。绑定(c => c. contacttitle).Width(190);列。绑定(c => c. companyname);列。bind (c =>).Width(110);}) . dataSource (dataSource => dataSource . ajax () . read (read => read. ajax)操作("Customers_Read"， "Grid"))))

公共类GridController: Controller {public ActionResult Customers_Read([DataSourceRequest] DataSourceRequest request) {var result =可枚举。范围(0,50)。Select(i => new Customer {CompanyName = "公司名称" + i, ContactName = "联系人名称" + i, ContactTitle = "联系人名称" + i, Country = "国家" + i});var dsResult = result.ToDataSourceResult(request);返回Json (dsResult);}}

公共类Customer{公共字符串ContactName {get;设置;}公共字符串公司名{get;设置;}公共字符串国家{get;设置;}公共字符串ContactTitle {get;设置;}}

基本配置

Grid配置选项作为helper的属性传递。网格使用数据源组件绑定它的数据。

若要将值解析为适当的数据类型，请设置类型字段在Grid TagHelper或HtmlHelper的数据源模式模型中。

@(Html.Kendo(). grid () . name ("grid") . columns (columns => {columns. grid。Bound(p => p. orderid).Width(120);列。绑定(p = > p.OrderDate) .Format(“{0:MM / dd / yyyy}”);列。Bound(p => p. shipname).Width(300);列。Bound(p => p. shipcity).Width(250);}) . groupable () . sortable () . filterable () . pageable (pageable => pagable . buttoncount (5) . refresh (true) . pagesize (new[] {5,10,20})) . dataSource (dataSource => dataSource . custom () . transport (transport => transport . read (read => read.)操作("Orders_Read"， "Grid")) . schema (schema => schema .Data("Data") . model (model =>{模型。字段(“向”,typeof (DateTime));}))))

功能和特性

• 数据操作
  • 数据绑定
  • 编辑
  • 过滤
  • 分组
  • 分页
  • 排序
  • 搜索面板
• 导出选项
  • Excel
  • PDF
  • 印刷
• 先进的实现
  • 列的增强
  • 状态的持久性
  • 层次结构
  • 模板
• 更多的设置
  • 脚手架
  • 滚动模式
  • 选择
  • 工具栏
  • 渲染和尺寸
  • 响应电网
  • 性能技巧
  • 全球化
  • 可访问性

事件

您可以订阅所有Grid事件，然后使用它们进一步定制Grid的行为。

@(Html.Kendo(). grid () . name ("grid") . columns (columns => {columns. grid .)绑定(c => c. contactname)。标题(“联系人姓名”).Width(240)。可过滤(ftb => ftb. multi (true));列。绑定(c => c. contacttitle)。标题(“接触”);列。绑定(c => c. companyname)。标题(“公司名称”);列。Bound(c => c.Country).Title("Country").Width(150);}) . groupable () . events (events => events . change ("onChange")) . sortable () . pageable (pageable => pageable . refresh (true) . pagesize (true) . buttoncount (5)) . dataSource (dataSource => dataSource . ajax () . read (read => read.)Action("Orders_Read"， "Grid")) .PageSize(20))) 

引用现有实例

要引用现有的Grid实例，请使用jQuery.data ()方法。一旦建立了引用，就使用网格客户端API控制它的行为。