ASP.NET Core Telerik Grid分页控件：添加前置标签及文本修改

方法：通过Grid的DataBound客户端事件修改DOM结构 #

Telerik Grid的分页控件默认不提供前置文本的直接配置项，可通过客户端事件在Grid数据绑定完成后，手动修改分页区域的DOM结构实现需求。

1. 在Grid配置中启用DataBound客户端事件
   修改Grid初始化代码，添加ClientEvents配置指定数据绑定完成后触发的JS函数：

.Pageable(pager => pager
        .PageSizes(new [] { 10 ,25 ,50 })
        .Messages(m =>
        {
            m.ItemsPerPage("entries");
        })
)
.ClientEvents(events => events.OnDataBound("gridDataBound")) // 新增客户端事件配置

2. 编写JavaScript处理函数
   在页面的<script>标签中添加以下代码，定位分页控件并重构文本结构：

function gridDataBound() {
    // 定位分页尺寸选择容器（若页面有多个Grid，建议加上Grid ID前缀，比如$("#YourGridId").find(".k-pager-sizes")）
    var pagerSizesContainer = $(".k-pager-sizes");
    if (!pagerSizesContainer.length) return;

    // 提取下拉框和原文本节点
    var pageSizeSelect = pagerSizesContainer.find("select");
    var originalTextNode = pagerSizesContainer.contents().filter(function() {
        return this.nodeType === 3 && $.trim(this.nodeValue) === "entries";
    });

    // 清空容器后重新拼接内容
    pagerSizesContainer.empty();
    pagerSizesContainer.append(document.createTextNode("show "));
    pagerSizesContainer.append(pageSizeSelect);
    pagerSizesContainer.append(document.createTextNode(" entries"));
}

说明 #

• 此方法通过Telerik Grid分页控件的默认类k-pager-sizes定位目标容器，筛选出文本节点后重新构建内容，实现“show [下拉框] entries”的显示效果。
• 若页面存在多个Telerik Grid，务必通过Grid的ID限定选择器范围，避免误修改其他Grid的分页控件。

内容的提问来源于stack exchange，提问作者Jesus