在 Kendo 网格上调用 JS 函数不起作用

Question

我有一个 Kendo 网格，其中包含我的项目的一些统计列（计数、平均值、百分比等）。当我尝试调用 JS 函数以显示最多 2 位小数和 trim 尾随零时，该函数不起作用。

但是，在浏览器控制台上它可以工作，所以当我向我的 JS 添加超时功能时，它可以工作。但由于多种原因，这不是我想要的解决方案

用于说明的 Kendo 网格：

@(Html.Kendo().Grid<StatisticsItemsModel>()
    .Name("grid-list")
    .Columns(columns =>
    {
        columns.Bound(t => t.Description).Title("Description").Width(50)
            .ClientTemplate("#if (Description!= null) { if (IsNew == true) { #" + "<div style='text-align:right'>#: Description#</div>" + "# } else { #" + "<div style='text-align:right'><strong>#: Description#</strong></div>" + "# }} #");
        columns.Bound(t => t.Count).Width(100).Title("Count").HtmlAttributes(new { style = "text-align:right" });
        columns.Bound(t => t.Percent).Width(100).Title("Percent").Format("{0:##.## %}").HtmlAttributes(new { style = "text-align:right" });
        columns.Bound(t => t.Average).Width(100).Title("Average").Format("{0:n2}").HtmlAttributes(new { style = "text-align:right", @class = "StatisticAverage" });
    })
    .DataSource(dataBinding => dataBinding
        .Ajax()
        .ServerOperation(true)
        .Read(read => read.Action("DataGridStatistics", "Filter", new { id = Model.Id })
    )
    )
)

当前正在使用超时的 JS 函数：

$(document).ready(
    function () {
        window.setTimeout(function () {
            $(".StatisticAverage").each(function (i, obj) {
                if ($(this).text() != "") {
                    var textVal = $(this).text().replace(",", ".");
                    var numberVal = parseFloat(textVal);
                    r = (+numberVal).toFixed(2).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '');
                    $(this).text(r);
                }
            })
        }, 2000)
    });

有没有关于如何在没有超时功能的情况下使其正常工作的想法？如何确保仅在 Kendo 网格完全加载时才执行 JS 函数？谢谢

Answer 1

尝试使用 dataBound 事件而不是超时。这将在来自 dataSource 的数据绑定到网格后触发。

dataBound

代码示例：

Html.Kendo().Grid<StatisticsItemsModel>()
  .Name("grid-list")
  .Events(e => e.DataBound("onDataBound"))
  .Columns....


function onDataBound() {
        // handle the data change event here...
    }

在 Kendo 网格上调用 JS 函数不起作用

Calling JS function on Kendo Grid doesn't work

javascript

jquery

kendo-grid