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

Question

我正在为 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);    
}

Answer 1

对于kendoNumericTextBox的更改事件，e.sender是kendoNumericTextBox本身，e.sender.element是原始widget的jQuery实例。上面的事件处理程序应该可以正常工作。

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

您的代码应该可以区分这两种情况。

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

希望对您有所帮助！

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

How to get Kendo-UI grid row data when text values changed

javascript

jquery

kendo-ui

typescript

kendo-grid