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

Question

I'm using Kendo UI for jQuery. My grid has 2 columns: a floating-point number and text. I need to get a grid row when values change. For a numeric field, everything works fine, but for a text field, it doesn't: the handler function is called, but how do I get the grid data in it? (I use the same handler, but it doesn't matter).

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))
                });
            }
        });
    }
}

Columns:

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 #' />"
    }
];

Event: for textbox "e.sender.element.closest("tr")" does not work.

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);    
}

Long Le Long Le · Accepted Answer · 2020-01-20T16:33:27

With kendoNumericTextBox's change event, e.sender is the kendoNumericTextBox itself, and e.sender.element is the jQuery instance of the original widget. The above event handler should work well.

With normal text field, change event is a jQuery event. There is no e.sender and therefore the code above will create an error. In this case, we use $(e.target).

Your code should probably separate these two cases.

And by the way, an javascript error notifier extension for web browser like this one will help you easily identify the problem.

Hope this help!

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

1 Answers