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

Posted 2023-05-07

【中文标题】Kendo Grid - 从弹出窗口编辑后刷新行

【英文标题】：Kendo Grid - Refresh Row after Edit from Popup

【发布时间】：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);
        
    );

【问题讨论】：

你能和我们分享任何代码吗？

我添加了网格的“可编辑”部分。您还需要什么？

能否请您添加您的剑道网格和模板代码？

我添加了网格/模板代码。请看这条评论：******这就是我想摆脱的************

这对你不起作用？ ***.com/questions/13613098/…

【参考方案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"));