Kendo Grid - 从弹出窗口编辑后刷新行答案

【问题标题】：Kendo Grid - Refresh Row after Edit from PopupKendo Grid - 从弹出窗口编辑后刷新行
【发布时间】：2015-10-27 15:07:39
【问题描述】：

我有一个 Kendo 网格，该网格有一列带有用于编辑行的弹出窗口的按钮。目前在对数据库进行更新后，我刷新了整个网格。这太费时间了。假设更新成功，我只想使用弹出窗口中的新值更新正在编辑的网格行。我该怎么做？

编辑添加：

这是来自我设置弹出编辑的网格。

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
        }

我的网格：

$("#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);
        }
    });

【问题讨论】：

你能和我们分享任何代码吗？
我添加了网格的“可编辑”部分。您还需要什么？
能否请您添加您的剑道网格和模板代码？
我添加了网格/模板代码。请看这条评论：******这就是我想摆脱的************
这对你不起作用？ stackoverflow.com/questions/13613098/…

标签： kendo-ui kendo-grid

【解决方案1】：

使用此post 接受的答案，您可以获得单击按钮的网格行，如下所示：

//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"));

}

【讨论】：