Question

我使用editable: "popup"编辑网格as shown on Telerik's demo page.编辑网格后，我希望网格刷新。在编辑网格后，网格是否有任何调用的事件？

我尝试使用数据绑定事件。在这种情况下，我将数据源读取，但它告诉我刷新网格是一个无限循环。我尝试使用saveChanges事件，但它无法正常工作。

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.ProductName);
    columns.Bound(p => p.UnitPrice).Width(100);
    columns.Bound(p => p.UnitsInStock).Width(100);
    columns.Bound(p => p.Discontinued).Width(100);
    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
  .Events(events => events.Change("saveChanges "))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.ProductID))
    .Create(update => update.Action("EditingPopup_Create", "Grid"))
    .Read(read => read.Action("EditingPopup_Read", "Grid"))
    .Update(update => update.Action("EditingPopup_Update", "Grid"))
    .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
))

Answer 1

您可以订阅网格数据源的Sync事件，并调用其数据源的read方法。

.Events(events => events.Error("error_handler").Sync("sync_handler"))

function sync_handler(e) {
   this.read();
}

Answer 2

将事件添加到DataSource

.DataSource(dataSource => dataSource.Ajax(

        .Events(e => e.RequestEnd("PowerPlantProduction.onRequestEnd"))**
)

使用Javascript：

onRequestEnd: function (e) {

        if (e.type == "update") {
            if (!e.response.Errors) {
               e.sender.read();
            }
        }
    },

Answer 3

如果您正在使用服务器端验证，则接受的答案可能会导致意外行为。无论请求是否成功，无论何时向服务器发送更新，都会触发sync事件，因此，如果请求触发服务器端验证错误（或任何其他错误），网格仍将更新并且任何更改都将丢失。仍然看着这个，但我找到的最好的解决方案是使用数据源的onRequestEnd()事件并手动检查错误。

例如：

function onRequestEnd(e)
{
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors) 
            data.read();
        else console.log("I had some issues");
    }
}

Answer 4

这将刷新网格

 var grid = $("#Name").data("kendoGrid");
     grid.dataSource.page(1);

如果.page（1）不起作用，请尝试.read，但它应该

Answer 5

如果要刷新网格，请使用此选项。

$("#WorkOrderDetails").data("kendoGrid").refresh();

Answer 6

我同意这是一个非常古老的问题，但不幸的是，几天前我也是这个错误的受害者。我的情景是

我第一次能够使用弹出窗口方法在数据库中插入新记录
如果我在没有刷新的情况下在同一网格中添加另一条记录，则网格会将这两条记录发送到服务器，不幸的是导致重复值错误。

最后，我认为我的问题得到了解决方案，当我将其插入数据库并返回该对象时，我没有将主键值设置为我的记录。

以下是我的剑道网格代码

org.eclipse.scout.rt.client.ui.messagebox

以下是错误处理代码

@(Html.Kendo().Grid<TeamMemberViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.abcd);
            columns.Bound(p => p.abcd_id).Hidden();
            columns.Bound(p => p.abcd12_id).Hidden();
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })
        .ToolBar(toolbar =>
        {
            if (ViewBag.IsAddAllowed)
            {
                toolbar.Create().Text("Add new");
            }

            //  toolbar.Save().SaveText("Save Changes");

        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ABCD")
        )
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()                
            .PageSize(20)
            .ServerOperation(false)
            .Events(events =>
            {
                events.Error("error_handler");
                events.RequestEnd("request_end");
            }
)
        .Model(model =>
        {
            model.Id(p => p.primarykey_id);
            model.Field(p => p.abcd);
        })
        .Create("ABCD_Create", "TeamMember", new { id = Model.abcd_id})
        .Read("ABCD_Read", "TeamMember", new { id = Model.abcd_id })
        .Update("ABCD_Update", "TeamMember", new { id = Model.abcd_id })
        .Destroy("TeamMember_Destroy", "TeamMember", new { id = Model.hackathon_id })
    )
)

服务器代码

  function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            $(".errorMessage").text(message);
            alert(message);
        }
    }



    function request_end(e) {
        switch (e.type) {
            case "create":
                if (e.Errors == undefined && e.response.Total > 0) {
                    //  alert("Saved Successfully");
                    $(".errorMessage").text("Saved Successfully");
                }
                break;

            case "update":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Updated Successfully");
                    $(".errorMessage").text("Updated Successfully");
                }
                break;

            case "destroy":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Deleted Successfully");
                    $(".errorMessage").text("Deleted Successfully");
                }
                break;

            default:
                $(".errorMessage").text("");
                break;
        }

        return true;
    }

希望这可以帮助某人

Answer 7

您可以在编辑按钮上调用一个函数，单击并在里面刷新网格：

function EditRow(){
     var grid = $("#YourGridName").data("kendoGrid");
     grid.dataSource.read();              
}

Answer 8

.sync: function (e) {
this.read();
},

Answer 9

如果其他人需要知道如何做到这一点。您可以在创建和更新位中包含“完整”功能。

transport: {
    read: {
        url: "http://myurl.json"
    },
    create: {
        url: "http://mycreate.json",
        type: "POST",
        complete: function(e) {
            $("#grid").data("kendoGrid").dataSource.read(); 
        }
    },

Answer 10

我一直试图弄清楚如何在创建新项目后刷新网格。场景是：在客户端中创建项目，向服务器发送请求，接收响应和更新客户端。（或者，我不介意弄清楚为什么网格没有使用我在服务器端创建函数中返回它的项目）

This post提到了requestEnd事件，但它没有暴露在剃须刀中。在请求完成后，即在服务器处理事件之后，此事件似乎触发，因此在客户端上创建的新对象将已经发送到服务器进行处理;然后客户端可以请求最新信息而不会丢失数据。由于网格数据源对象在页面加载时未定义，我最终使用.Change事件来挂钩requestEnd事件。

@(Html.Kendo().Grid
.Name("user-grid")
...
.Pageable(pageable => pageable
    ...
    .Events( e => e.Remove("grid_remove").Change("hook_request_end"))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(m =>
    {
        m.Id(vm => vm.DocumentId);
        m.Field<DateTime>("LastModified").Editable(false);
    })
    .Read(a => a.Action("KList", "Controller"))
    .Create(a => a.Action("KCreate", "Controller"))
    .Update(a => a.Action("KUpdate", "Controller"))
)

然后是javascript：

var requestEndHooked = false;
function hook_request_end()
{
    if (requestEndHooked == true)
    {
        return;
    }

    requestEndHooked = true;
    $("#user-grid").data("kendoGrid").dataSource.bind("requestEnd", dataSource_requestEnd);
}

function dataSource_requestEnd(e)
{
    try
    {
        if (e.type == "create")
        {
            $("#user-grid").data("kendoGrid").dataSource.read();
        }

    }
    catch (e)
    {
    }
}

如果有更好的方法，我很想知道。

要回答您的问题，除了“创建”之外还有其他事件：“阅读”，“更新”

Answer 11

在具有弹出编辑模式的ajax mvc kendo网格中使用AutoSync(true)会导致弹出窗口根本不显示。

所以我用这个

function onRequestEnd(e) {
        if(e.type == "create" || e.type == "destroy" || e.type == "update") {
            setTimeout(function myfunction() {
                $("#mygrid").data("kendoGrid").dataSource.read();
            }, 1000);
        }
    }

超时是为了确保你不要超过粗暴行动。

Answer 12

我知道这是一个老问题，但 Telerik 论坛上有一个完美可行的示例（至少对我而言！）：https://www.telerik.com/forums/refresh-grid-after-insert-update

我在这里发布这个是因为该论坛的问题和答案还不到一年，可能是在 OP 提出问题时，该解决方案不适用于 Kendo 版本。

那里提到的解决方案是将一个 dataBound 处理函数附加到网格，该函数只会在保存事件后执行一次。在代码中：

function onGridEdit(e) {
    e.sender.one("dataBound", function (e) {
        e.sender.dataSource.read();
    });
}
 
function bindDataAndRefresh(e) {
    var grid = $("#upcoming-grid").data("kendoGrid");
    grid.bind("dataBound", onGridEdit(e));
}
 

$(document).ready(function () {
    var grid = $("#upcoming-grid").data("kendoGrid");
    grid.bind("save", bindDataAndRefresh);
});

Answer 13

我在为剑道创建 complete 时使用了 transport:update 部分的 datasource 属性。

我的代码

 dsource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: serverapiUrl + "/emp",
                    type: 'GET',
                    dataType: "json",
                    cache: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader('api-key', 'auth key');
                    }
                },
                create: {
                    url: serverapiUrl + "/emp",
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function (xhr, settings) {
                        console.log('under create');
                        xhr.setRequestHeader('api-key', 'authkey');
                        xhr.setRequestHeader("content-type", "application/json"); 
                        console.log('settings', settings);
                        console.log(xhr);
                    }
                },
                update: {
                    url: serverapiUrl + "/emp",
                    type: 'PUT',
                    dataType: 'json',                        
                    beforeSend: function (xhr, settings) {
                        console.log('under update');
                        xhr.setRequestHeader('api-key', 'authkey');
                        xhr.setRequestHeader("content-type", "application/json");                                                        
                        console.log('settings', settings);
                        console.log(xhr);
                    },
                    complete: function (eve) {
                        console.log('update complete');
                        $("#griddiv").data("kendoGrid").dataSource.read();
                    }
                }

rest 遵循 kendo ui 数据源创建文档的正常结构。

编辑Kendo UI网格后，如何刷新网格？

13 个答案: