Progress Telerik 教程（四）：Telerik Grid 表格控件完全指南

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290

1. Grid 控件概述

Telerik Grid 是最强大和使用最广泛的控件之一，提供了完整的数据展示和操作功能。它支持大量数据的高效渲染、灵活的列配置、丰富的交互功能，是构建数据驱动应用程序的核心组件。

1.1 主要特性

高性能：虚拟化渲染，支持大数据集
丰富功能：分页、排序、筛选、分组
灵活配置：自定义列模板、编辑模式
交互体验：行选择、列调整、拖拽排序
导出功能：Excel、PDF、CSV 导出

1.2 适用场景

数据报表展示
管理后台列表页面
数据分析界面
企业级表格应用

2. 基础数据展示

2.1 简单 Grid 创建

@(Html.Kendo().Grid<Product>()
    .Name("basicGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Width(80);
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        columns.Bound(p => p.Category).Title("分类");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
    )
    .Height(400)
)

2.2 数据源配置

// 控制器方法
[HttpPost]
public IActionResult GetProducts([DataSourceRequest] DataSourceRequest request)
{
    var products = GetProductList(); // 获取产品数据
    var result = products.ToDataSourceResult(request);
    return Json(result);
}

// 示例数据
private List<Product> GetProductList()
{
    return new List<Product>
    {
        new Product { ID = 1, Name = "MacBook Pro", Price = 25999, Category = "电子产品", Stock = 15 },
        new Product { ID = 2, Name = "无线鼠标", Price = 199, Category = "电子产品", Stock = 100 },
        new Product { ID = 3, Name = "办公椅", Price = 1599, Category = "办公用品", Stock = 25 },
        new Product { ID = 4, Name = "咖啡机", Price = 3999, Category = "家电", Stock = 8 }
    };
}

2.3 列配置详解

@(Html.Kendo().Grid<Product>()
    .Name("configuredGrid")
    .Columns(columns =>
    {
        // 基础绑定列
        columns.Bound(p => p.ID)
               .Title("编号")
               .Width(80)
               .HtmlAttributes(new { @class = "text-center" })
               .HeaderHtmlAttributes(new { @class = "text-center" });

        // 文本列
        columns.Bound(p => p.Name)
               .Title("产品名称")
               .Width(200)
               .HtmlAttributes(new { @class = "product-name" });

        // 格式化数值列
        columns.Bound(p => p.Price)
               .Title("价格")
               .Format("{0:C}")
               .Width(120)
               .HtmlAttributes(new { @class = "text-right" });

        // 模板列
        columns.Template(@<text>
            @if(item.Stock > 10) {
                <span class="badge bg-success">充足</span>
            } else if(item.Stock > 0) {
                <span class="badge bg-warning">不足</span>
            } else {
                <span class="badge bg-danger">缺货</span>
            }
        </text>)
        .Title("库存状态")
        .Width(100);

        // 日期列
        columns.Bound(p => p.CreatedDate)
               .Title("创建时间")
               .Format("{0:yyyy-MM-dd}")
               .Width(120);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
    )
)

3. 分页功能

3.1 基础分页配置

@(Html.Kendo().Grid<Product>()
    .Name("pagedGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        columns.Bound(p => p.Category).Title("分类");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10) // 每页显示条数
        .Read(read => read.Action("GetProducts", "Product"))
    )
    .Pageable() // 启用分页
    .Height(500)
)

3.2 高级分页配置

@(Html.Kendo().Grid<Product>()
    .Name("advancedPagedGrid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(15)
        .Read(read => read.Action("GetProducts", "Product"))
    )
    .Pageable(pageable => pageable
        .Refresh(true)        // 显示刷新按钮
        .PageSizes(true)      // 显示页面大小选择器
        .PageSizes(new int[] { 10, 20, 50, 100 }) // 自定义页面大小选项
        .ButtonCount(5)       // 显示的页码按钮数量
        .Messages(messages => messages
            .Display("显示 {0} - {1} 条，共 {2} 条记录")
            .Empty("没有数据")
            .Page("页")
            .Of("/ {0}")
            .ItemsPerPage("条/页")
            .First("首页")
            .Previous("上一页")
            .Next("下一页")
            .Last("末页")
            .Refresh("刷新")
        )
    )
)

3.2 服务端分页处理

[HttpPost]
public IActionResult GetProductsPaged([DataSourceRequest] DataSourceRequest request)
{
    // 模拟大数据集
    var allProducts = GenerateLargeProductList(10000);
    
    // 应用分页、排序、筛选
    var result = allProducts.ToDataSourceResult(request);
    
    return Json(result);
}

// 对于真实数据库查询
[HttpPost]
public async Task<IActionResult> GetProductsFromDb([DataSourceRequest] DataSourceRequest request)
{
    using var context = new ApplicationDbContext();
    
    // 直接在数据库层面处理分页、排序、筛选
    var result = await context.Products
        .Include(p => p.Category)
        .ToDataSourceResultAsync(request);
    
    return Json(result);
}

4. 排序功能

4.1 启用排序

@(Html.Kendo().Grid<Product>()
    .Name("sortableGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Title("ID").Sortable(false); // 禁用排序
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        columns.Bound(p => p.CreatedDate).Title("创建时间").Format("{0:yyyy-MM-dd}");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
        .Sort(sort => sort.Add(p => p.Name).Ascending()) // 默认排序
    )
    .Sortable() // 启用排序
)

4.2 多列排序

@(Html.Kendo().Grid<Product>()
    .Name("multiSortGrid")
    .Sortable(sortable => sortable
        .AllowUnsort(true)     // 允许取消排序
        .SortMode(GridSortMode.MultipleColumn) // 多列排序
        .ShowIndexes(true)     // 显示排序索引
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
        // 预设多列排序
        .Sort(sort => {
            sort.Add(p => p.Category).Ascending();
            sort.Add(p => p.Price).Descending();
        })
    )
)

4.3 自定义排序

// 控制器中处理自定义排序逻辑
[HttpPost]
public IActionResult GetProductsWithCustomSort([DataSourceRequest] DataSourceRequest request)
{
    var products = GetProductList();
    
    // 自定义排序逻辑
    if (request.Sorts?.Any() == true)
    {
        foreach (var sort in request.Sorts)
        {
            switch (sort.Member.ToLower())
            {
                case "priority":
                    // 自定义优先级排序
                    products = sort.SortDirection == ListSortDirection.Ascending
                        ? products.OrderBy(CalculatePriority).ToList()
                        : products.OrderByDescending(CalculatePriority).ToList();
                    break;
            }
        }
    }
    
    var result = products.ToDataSourceResult(request);
    return Json(result);
}

private int CalculatePriority(Product product)
{
    // 自定义优先级计算逻辑
    return product.Stock > 50 ? 1 : (product.Stock > 10 ? 2 : 3);
}

5. 筛选功能

5.1 基础筛选

@(Html.Kendo().Grid<Product>()
    .Name("filterableGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        columns.Bound(p => p.Category).Title("分类");
        columns.Bound(p => p.CreatedDate).Title("创建时间").Format("{0:yyyy-MM-dd}");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
    )
    .Filterable() // 启用筛选
)

5.2 高级筛选配置

@(Html.Kendo().Grid<Product>()
    .Name("advancedFilterGrid")
    .Filterable(filterable => filterable
        .Mode(GridFilterMode.Menu) // 筛选模式：Menu, Row, MenuAndRow
        .Extra(false)              // 禁用额外筛选条件
        .Messages(messages => messages
            .Info("显示符合条件的记录：")
            .Filter("筛选")
            .Clear("清除")
            .And("且")
            .Or("或")
        )
    )
    .Columns(columns =>
    {
        // 文本筛选
        columns.Bound(p => p.Name)
               .Title("产品名称")
               .Filterable(filterable => filterable
                   .UI("productNameFilter")
               );

        // 数值范围筛选
        columns.Bound(p => p.Price)
               .Title("价格")
               .Format("{0:C}")
               .Filterable(filterable => filterable
                   .UI("priceRangeFilter")
               );

        // 下拉选择筛选
        columns.Bound(p => p.Category)
               .Title("分类")
               .Filterable(filterable => filterable
                   .UI("categoryDropDownFilter")
               );

        // 日期范围筛选
        columns.Bound(p => p.CreatedDate)
               .Title("创建时间")
               .Format("{0:yyyy-MM-dd}")
               .Filterable(filterable => filterable
                   .UI("dateRangeFilter")
               );
    })
)

<script>
// 产品名称自定义筛选
function productNameFilter(element) {
    element.kendoTextBox({
        placeholder: "输入产品名称"
    });
}

// 价格范围筛选
function priceRangeFilter(element) {
    element.kendoNumericTextBox({
        format: "c2",
        decimals: 2
    });
}

// 分类下拉筛选
function categoryDropDownFilter(element) {
    element.kendoDropDownList({
        dataSource: [
            { text: "全部", value: "" },
            { text: "电子产品", value: "电子产品" },
            { text: "办公用品", value: "办公用品" },
            { text: "家电", value: "家电" }
        ],
        dataTextField: "text",
        dataValueField: "value",
        optionLabel: "选择分类"
    });
}

// 日期范围筛选
function dateRangeFilter(element) {
    element.kendoDatePicker({
        format: "yyyy-MM-dd"
    });
}
</script>

5.3 行筛选模式

@(Html.Kendo().Grid<Product>()
    .Name("rowFilterGrid")
    .Filterable(filterable => filterable
        .Mode(GridFilterMode.Row)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("开始于")
                .Contains("包含")
                .EndsWith("结束于")
                .Eq("等于")
            )
            .ForNumber(num => num.Clear()
                .Eq("等于")
                .Gte("大于等于")
                .Lte("小于等于")
            )
        )
    )
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        columns.Bound(p => p.Stock).Title("库存");
        columns.Bound(p => p.Category).Title("分类");
    })
)

6. 单元格模板与列操作

6.1 基础模板列

@(Html.Kendo().Grid<Product>()
    .Name("templateGrid")
    .Columns(columns =>
    {
        // 图片模板
        columns.Template(@<text>
            <img src="/images/products/@(item.ID).jpg" 
                 alt="@item.Name" 
                 style="width: 50px; height: 50px; object-fit: cover;" />
        </text>)
        .Title("图片")
        .Width(80);

        columns.Bound(p => p.Name).Title("产品名称");

        // 价格格式化模板
        columns.Template(@<text>
            <span class="price-display">
                <i class="fa fa-dollar-sign"></i>
                @item.Price.ToString("N2")
            </span>
        </text>)
        .Title("价格")
        .Width(120);

        // 库存状态模板
        columns.Template(@<text>
            @{
                string badgeClass = "bg-success";
                string statusText = "充足";
                if (item.Stock <= 0) {
                    badgeClass = "bg-danger";
                    statusText = "缺货";
                } else if (item.Stock < 10) {
                    badgeClass = "bg-warning";
                    statusText = "不足";
                }
            }
            <span class="badge @badgeClass">
                @statusText (@item.Stock)
            </span>
        </text>)
        .Title("库存")
        .Width(100);

        // 评分模板
        columns.Template(@<text>
            <div class="rating">
                @for(int i = 1; i <= 5; i++) {
                    if(i <= item.Rating) {
                        <i class="fa fa-star text-warning"></i>
                    } else {
                        <i class="fa fa-star text-muted"></i>
                    }
                }
                <span class="ms-2">(@item.Rating)</span>
            </div>
        </text>)
        .Title("评分")
        .Width(120);
    })
)

6.2 操作列模板

@(Html.Kendo().Grid<Product>()
    .Name("actionGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("产品名称");
        columns.Bound(p => p.Price).Title("价格").Format("{0:C}");
        
        // 操作按钮列
        columns.Template(@<text>
            <div class="btn-group" role="group">
                <button type="button" 
                        class="btn btn-sm btn-primary" 
                        onclick="viewProduct(@item.ID)">
                    <i class="fa fa-eye"></i> 查看
                </button>
                <button type="button" 
                        class="btn btn-sm btn-warning" 
                        onclick="editProduct(@item.ID)">
                    <i class="fa fa-edit"></i> 编辑
                </button>
                <button type="button" 
                        class="btn btn-sm btn-danger" 
                        onclick="deleteProduct(@item.ID, '@item.Name')">
                    <i class="fa fa-trash"></i> 删除
                </button>
            </div>
        </text>)
        .Title("操作")
        .Width(200)
        .HtmlAttributes(new { @class = "text-center" });

        // 下拉菜单操作列
        columns.Template(@<text>
            <div class="dropdown">
                <button class="btn btn-sm btn-secondary dropdown-toggle" 
                        type="button" 
                        data-bs-toggle="dropdown">
                    操作 <i class="fa fa-caret-down"></i>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" onclick="viewProduct(@item.ID)">查看详情</a></li>
                    <li><a class="dropdown-item" href="#" onclick="editProduct(@item.ID)">编辑</a></li>
                    <li><a class="dropdown-item" href="#" onclick="duplicateProduct(@item.ID)">复制</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" onclick="deleteProduct(@item.ID)">删除</a></li>
                </ul>
            </div>
        </text>)
        .Title("更多")
        .Width(80);
    })
)

<script>
function viewProduct(id) {
    window.location.href = '/Product/Details/' + id;
}

function editProduct(id) {
    window.location.href = '/Product/Edit/' + id;
}

function deleteProduct(id, name) {
    if (confirm('确定要删除产品 "' + name + '" 吗？')) {
        $.post('/Product/Delete/' + id, function(result) {
            if (result.success) {
                $('#actionGrid').data('kendoGrid').dataSource.read();
                alert('删除成功');
            } else {
                alert('删除失败：' + result.message);
            }
        });
    }
}

function duplicateProduct(id) {
    $.post('/Product/Duplicate/' + id, function(result) {
        if (result.success) {
            $('#actionGrid').data('kendoGrid').dataSource.read();
            alert('复制成功');
        }
    });
}
</script>

6.3 条件格式化

@(Html.Kendo().Grid<Product>()
    .Name("conditionalGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).Title("产品名称");
        
        // 条件价格显示
        columns.Template(@<text>
            @{
                string priceClass = "";
                if (item.Price > 1000) {
                    priceClass = "text-danger fw-bold"; // 高价红色粗体
                } else if (item.Price > 500) {
                    priceClass = "text-warning fw-bold"; // 中等价格橙色
                } else {
                    priceClass = "text-success"; // 低价绿色
                }
            }
            <span class="@priceClass">@item.Price.ToString("C")</span>
        </text>)
        .Title("价格")
        .Width(120);

        // 库存警告
        columns.Template(@<text>
            <div class="d-flex align-items-center">
                @if (item.Stock <= 0) {
                    <i class="fa fa-exclamation-triangle text-danger me-2"></i>
                    <span class="text-danger">缺货</span>
                } else if (item.Stock < 10) {
                    <i class="fa fa-exclamation-circle text-warning me-2"></i>
                    <span class="text-warning">库存不足 (@item.Stock)</span>
                } else {
                    <i class="fa fa-check-circle text-success me-2"></i>
                    <span class="text-success">@item.Stock 件</span>
                }
            </div>
        </text>)
        .Title("库存状态")
        .Width(150);

        // 销售趋势
        columns.Template(@<text>
            @{
                var trend = item.SalesTrend; // 假设有销售趋势数据
                string trendIcon = trend > 0 ? "fa-arrow-up text-success" : 
                                  trend < 0 ? "fa-arrow-down text-danger" : 
                                  "fa-minus text-muted";
                string trendText = trend > 0 ? "上升" : trend < 0 ? "下降" : "持平";
            }
            <div class="trend-indicator">
                <i class="fa @trendIcon"></i>
                <span class="ms-1">@trendText</span>
                @if (trend != 0) {
                    <small class="ms-1">(@Math.Abs(trend)%)</small>
                }
            </div>
        </text>)
        .Title("销售趋势")
        .Width(120);
    })
)

7. 综合实例：完整的产品管理表格

@{
    ViewData["Title"] = "产品管理";
}

<div class="container-fluid">
    <div class="row mb-3">
        <div class="col">
            <h2>产品管理系统</h2>
            <p class="text-muted">管理所有产品信息，支持查看、编辑、删除等操作</p>
        </div>
    </div>

    <div class="row">
        <div class="col">
            @(Html.Kendo().Grid<Product>()
                .Name("productManagementGrid")
                .Columns(columns =>
                {
                    // 选择列
                    columns.Select().Width(50);

                    // 产品图片
                    columns.Template(@<text>
                        <img src="/images/products/@(item.ID).jpg" 
                             alt="@item.Name" 
                             class="product-thumbnail"
                             style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" />
                    </text>)
                    .Title("图片")
                    .Width(70)
                    .HtmlAttributes(new { @class = "text-center" });

                    // 产品信息
                    columns.Template(@<text>
                        <div class="product-info">
                            <div class="fw-bold">@item.Name</div>
                            <small class="text-muted">SKU: @item.SKU</small>
                        </div>
                    </text>)
                    .Title("产品信息")
                    .Width(250);

                    // 价格
                    columns.Template(@<text>
                        <div class="price-info">
                            <div class="current-price">@item.Price.ToString("C")</div>
                            @if (item.OriginalPrice > item.Price) {
                                <small class="original-price text-muted text-decoration-line-through">
                                    @item.OriginalPrice.ToString("C")
                                </small>
                            }
                        </div>
                    </text>)
                    .Title("价格")
                    .Width(120);

                    // 分类
                    columns.Bound(p => p.Category)
                           .Title("分类")
                           .Width(100);

                    // 库存状态
                    columns.Template(@<text>
                        @{
                            string statusClass = item.Stock > 50 ? "success" : 
                                               item.Stock > 10 ? "warning" : 
                                               item.Stock > 0 ? "danger" : "secondary";
                            string statusText = item.Stock > 50 ? "充足" :
                                              item.Stock > 10 ? "正常" :
                                              item.Stock > 0 ? "不足" : "缺货";
                        }
                        <div class="stock-info">
                            <span class="badge bg-@statusClass">@statusText</span>
                            <div class="small text-muted">@item.Stock 件</div>
                        </div>
                    </text>)
                    .Title("库存")
                    .Width(100);

                    // 状态
                    columns.Template(@<text>
                        @if (item.IsActive) {
                            <span class="badge bg-success">
                                <i class="fa fa-check-circle"></i> 启用
                            </span>
                        } else {
                            <span class="badge bg-secondary">
                                <i class="fa fa-times-circle"></i> 禁用
                            </span>
                        }
                    </text>)
                    .Title("状态")
                    .Width(100);

                    // 创建时间
                    columns.Bound(p => p.CreatedDate)
                           .Title("创建时间")
                           .Format("{0:yyyy-MM-dd}")
                           .Width(120);

                    // 操作列
                    columns.Template(@<text>
                        <div class="btn-group-sm" role="group">
                            <button type="button" 
                                    class="btn btn-outline-primary btn-sm me-1" 
                                    onclick="viewProduct(@item.ID)"
                                    title="查看详情">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button type="button" 
                                    class="btn btn-outline-warning btn-sm me-1" 
                                    onclick="editProduct(@item.ID)"
                                    title="编辑">
                                <i class="fa fa-edit"></i>
                            </button>
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm" 
                                    onclick="deleteProduct(@item.ID, '@item.Name')"
                                    title="删除">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </text>)
                    .Title("操作")
                    .Width(120)
                    .HtmlAttributes(new { @class = "text-center" });
                })
                .ToolBar(toolbar => {
                    toolbar.Create().Text("新增产品").HtmlAttributes(new { @class = "btn-success" });
                    toolbar.Custom().Text("批量导入").HtmlAttributes(new { @class = "btn-info", onclick = "importProducts()" });
                    toolbar.Custom().Text("导出Excel").HtmlAttributes(new { @class = "btn-secondary", onclick = "exportToExcel()" });
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(model =>
                    {
                        model.Id(p => p.ID);
                        model.Field(p => p.ID).Editable(false);
                    })
                    .Create(create => create.Action("CreateProduct", "Product"))
                    .Read(read => read.Action("GetProducts", "Product"))
                    .Update(update => update.Action("UpdateProduct", "Product"))
                    .Destroy(destroy => destroy.Action("DeleteProduct", "Product"))
                )
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(new[] { 10, 20, 50, 100 })
                    .ButtonCount(5)
                )
                .Sortable(sortable => sortable
                    .SortMode(GridSortMode.MultipleColumn)
                    .ShowIndexes(true)
                )
                .Filterable(filterable => filterable
                    .Mode(GridFilterMode.Menu)
                )
                .Groupable()
                .Reorderable(reorder => reorder.Columns(true))
                .Resizable(resize => resize.Columns(true))
                .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple)
                    .Type(GridSelectionType.Row)
                )
                .Height(600)
                .HtmlAttributes(new { @class = "modern-grid" })
            )
        </div>
    </div>
</div>

<style>
.modern-grid {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.product-thumbnail {
    border: 1px solid #ddd;
}

.product-info .fw-bold {
    color: #333;
    margin-bottom: 2px;
}

.price-info .current-price {
    font-weight: bold;
    color: #28a745;
}

.stock-info .badge {
    margin-bottom: 2px;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
</style>

<script>
function viewProduct(id) {
    window.open('/Product/Details/' + id, '_blank');
}

function editProduct(id) {
    window.location.href = '/Product/Edit/' + id;
}

function deleteProduct(id, name) {
    if (confirm('确定要删除产品 "' + name + '" 吗？\n删除后无法恢复！')) {
        $.ajax({
            url: '/Product/Delete/' + id,
            type: 'POST',
            success: function(result) {
                if (result.success) {
                    $('#productManagementGrid').data('kendoGrid').dataSource.read();
                    showNotification('产品删除成功', 'success');
                } else {
                    showNotification('删除失败：' + result.message, 'error');
                }
            },
            error: function() {
                showNotification('删除操作失败，请稍后重试', 'error');
            }
        });
    }
}

function importProducts() {
    // 打开导入对话框
    $('#importModal').modal('show');
}

function exportToExcel() {
    var grid = $('#productManagementGrid').data('kendoGrid');
    grid.saveAsExcel();
}

function showNotification(message, type) {
    // 显示通知消息
    var notification = $('#notification').kendoNotification({
        position: {
            pinned: true,
            top: 30,
            right: 30
        }
    }).data("kendoNotification");
    
    notification.show(message, type);
}

// 页面加载完成后的初始化
$(document).ready(function() {
    // 启用工具提示
    $('[title]').tooltip();
    
    // 绑定选择行事件
    $('#productManagementGrid').on('change', function(e) {
        var selectedRows = this.select();
        var selectedCount = selectedRows.length;
        
        if (selectedCount > 0) {
            $('#batchActions').show();
            $('#selectedCount').text(selectedCount);
        } else {
            $('#batchActions').hide();
        }
    });
});
</script>

总结

本教程全面介绍了Telerik Grid表格控件的核心功能：

数据展示：
- 基础Grid创建和列配置
- 数据源配置和绑定
- 列类型和格式化
分页功能：
- 客户端和服务端分页
- 分页配置和自定义
- 大数据集处理
排序功能：
- 单列和多列排序
- 自定义排序逻辑
- 排序状态管理
筛选功能：
- 多种筛选模式
- 自定义筛选UI
- 条件筛选组合
模板和操作：
- 自定义单元格模板
- 操作列设计
- 条件格式化

通过掌握这些功能，您可以构建功能强大、用户体验良好的数据表格界面，满足各种业务场景的需求。Grid控件的灵活性和强大功能使其成为企业级应用开发的重要工具。

Progress Telerik Ultimate Collection 2025 Q2下载地址 https://soft51.cc/software/175792580241152290