文本值更改时如何获取 Kendo-UI 网格行数据答案

【问题标题】：How to get Kendo-UI grid row data when text values changed文本值更改时如何获取 Kendo-UI 网格行数据
【发布时间】：2020-01-17 06:41:01
【问题描述】：

我正在为 jQuery 使用 Kendo UI。我的网格有 2 列：浮点数和文本。当值发生变化时，我需要得到一个网格行。对于数字字段，一切正常，但对于文本字段，它不会：调用处理函数，但我如何获取其中的网格数据？（我使用相同的处理程序，但没关系）。

export class MyGrid {
    constructor() {
        let that: MyGrid = this;

        $("#MyGrid").kendoGrid({
            dataBound: function (e) {
                this.tbody.find(".MyNumericValue").each(function () {
                    $(this).kendoNumericTextBox({
                        format: "n3",
                        decimals: 3,
                        change: that.onValueChange.bind(that)
                    });
                });

                // Event function is called, but how to get row data?
                this.tbody.find(".MyTextValue").each(function () {
                    $(this).on("change", that.onValueChange.bind(that))
                });
            }
        });
    }
}

列：

let columns = [
    {
        title: "Decimal value",
        field: "RoadLength",
        template: "<input name='RoadLength' class='MyNumericValue' value='#: RoadLength #' />"
    },
    {
        title: "Text value",
        field: "Name",
        template: "<input name='Name' class='k-textbox MyTextValue' value='#: Name #' />"
    }
];

事件：对于文本框“e.sender.element.closest("tr")”不起作用。

onValueChange(e: any): void {
    let g = $("#MyGrid").data("kendoGrid");
    let dataItem = g.dataItem(e.sender.element.closest("tr"));
    let name: string = e.sender.element[0].name;
    let value = e.sender.value();
    // dataItem.set(name, value);    
}

【问题讨论】：

标签： javascript jquery typescript kendo-ui kendo-grid

【解决方案1】：

使用 kendoNumericTextBox 的 change 事件，e.sender 是 kendoNumericTextBox 本身，而 e.sender.element 是原始小部件的 jQuery 实例。上面的事件处理程序应该可以正常工作。

对于普通文本字段，更改事件是一个 jQuery event。没有 e.sender，因此上面的代码会产生错误。在这种情况下，我们使用 $(e.target)。

您的代码可能应该将这两种情况分开。

顺便说一下，像 this one 这样的网络浏览器的 javascript 错误通知扩展将帮助您轻松识别问题。

希望对您有所帮助！

【讨论】：