Kendo Grid - Refresh Row after Edit from Popup

Question

I have a Kendo grid that has a column with buttons that bring up a popup for editing a row. Currently after doing an update to the database, I refresh the whole grid. This is too time consuming. I want to just update the grid row being edited with the new values from the popup, assuming the update succeeds. How do I do this?

Edited to Add:

This is from my grid where I set up popup editing.

editable: {
            mode: "popup",
            window: {
                title: "Add/Edit Generator Inventory" //changes title of the popup window                    
            },
            template: kendo.template($("#divGeneratorInventoryTemplate").html()) //assign custom edit template for item while edit an individual item
        }

My Grid:

$("#GeneratorInventoryGrid").kendoGrid(
    {
        columns: [
                    { title: "<input id='chkHeader' class='parentCheckbox' type='checkbox' />", width: "40px", template: "<input class='childCheckbox' type='checkbox' id='#: GeneratorDetailId #' />", filterable: false, sortable: false },
                    { field: "GeneratorCode", title: "Generator ID", width: "145px", validation: { required: true }, groupable: false, template: "<a title='Click to Edit' class='k-button k-        button-icontext k-grid-edit' onclick='viewModels.Generator.LoadDropDownlistValue(false);'>#: GeneratorCode #</a>", filterable: true, sortable: true }, //                                       
                    { field: "Edit", title: "Edit/Delete", width: "200px", groupable: false, template: "<a title='Click to Edit' class='k-button k-button-icontext k-grid-edit'  onclick='viewModels.Generator.LoadDropDownlistValue(false);'><span class='k-icon k-edit'></span>Edit</a> &nbsp; <a title='Click to Delete' class='k-button k-button-icontext'          onclick='viewModels.Generator.RemoveGeneratorValue(#: GeneratorDetailId # , #: TicketId#, \"#: GeneratorCode #\");' ><span class='k-icon k-delete'></span>Delete</a>", filterable: false, sortable: false }
        ],
        resizable: true,
        scrollable: true,
        groupable: false,
        detailExpand: function (e) { alert('') },
        dataSource: new kendo.data.DataSource({
            transport: {
                //batch: true,
                read: function (options) {
                    var uri = '/GeneratorDetail/Active';
                    //var uri = '/GeneratorDetail/All';

                    ServiceHelper.getData(uri, function (data) {
                        viewModels.Generator.GeneratorInventory.removeAll();
                        viewModels.Generator.GeneratorInventory(data.Data);

                        //viewModels.Generator.GeneratorInventory(viewModels.Generator.FilterActiveInactive(data.Data, 1));

                    }, null);


                    options.success(viewModels.Generator.GeneratorInventory());
                },
            },

            schema: {
                model: {
                    type: "json",
                    id: "GeneratorDetailId",
                    fields: {
                        GeneratorCode: { type: "string" },

                    }
                }
            },
            sort: {
                field: "GeneratorCode", dir: "asc"
            },
        }),
        sortable: {
            mode: "multiple",
            allowUnsort: false
        },
        edit: function (e) {



        },

        dataBound: function (e) {
            // edited for brevity
        },
        editable: {
            mode: "popup",
            window: {
                title: "Add/Edit Generator Inventory" //changes title of the popup window                    
            },
            template: kendo.template($("#divGeneratorInventoryTemplate").html()) //assign custom edit template for item while edit an individual item
        },           
        save: function (e) {           
            var url = "";
            if (e.model.GeneratorDetailId == undefined || e.model.GeneratorDetailId == "") //Insert item
            {
                url = '/GeneratorDetail/Save';
                ServiceHelper.postData(url, JSON.stringify(saveGeneratorInventoryData), function (data) {
                    if (data == true) {
                        showNotification('Generator Inventory data saved successfully', '');

                        // ****** this is what I want to get rid of ************
                        $('#GeneratorInventoryGrid').data('kendoGrid').dataSource.read();
                        $('#GeneratorInventoryGrid').data('kendoGrid').refresh();

                    }
                }, null);
            }
        },
        height: 600,
        width: 200,
        filterMenuInit: function (e) {
            setTimeout(function () {
                $(".k-animation-container").css("left", "328px");
            }, 10);
        }
    });

Answer 1

Using the accepted answer from this post, you can get the row of the grid on which the button was clicked like this:

//Setting up the Edit button in your grid
command: [{ text: "Edit", click: onEditClicked }]...

//Function to handle button click
function onEditClicked(e) {

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

}