Как обновить сетку после редактирования сетки пользовательского интерфейса Kendo?

Ответ 1

Вы можете подписаться на событие синхронизации источника данных сетки и вызвать метод чтения своего источника данных.

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

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

Ответ 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();
            }
        }
    },

Ответ 3

Принятый ответ может вызвать неожиданное поведение, если вы используете проверку на стороне сервера. Событие синхронизации запускается всякий раз, когда обновление отправляется на сервер, независимо от того, был ли запрос успешным, поэтому, если запрос вызывает ошибки проверки на стороне сервера (или любые другие ошибки), сетка все равно будет обновлена, а любые изменения будут потеряны. Я по-прежнему смотрю на это, но лучшее решение, которое я нашел, - это использовать событие источника данных 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");
    }
}

Ответ 4

Это обновит сетку

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

если .page(1) не работает, попробуйте .read, но он должен

Ответ 5

Используйте это, если вы хотите обновить сетку.

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

Ответ 6

Я согласен, что это очень старый вопрос, но, к сожалению, я был жертвой этой ошибки несколько дней назад. Мой сценарий был

• Впервые я смог вставить новую запись в базу данных с помощью всплывающего метода
• Если я добавлю еще одну запись в ту же сетку без обновления, сетка отправит обе записи на сервер и, к сожалению, приведет к двойной ошибке значения.

Наконец, я думаю, что у меня есть решение для моей проблемы, Я не устанавливал значение первичного ключа для своей записи, когда я вставляю его в базу данных и возвращаю этот объект.

Ниже мой код сетки кендо

@(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;
    }

Код сервера

 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult ABCD_Create([DataSourceRequest] DataSourceRequest request, MyViewModel my, short abcd_id)
{
    if (my != null && ModelState.IsValid)
    {

        MY tm = Mapper.Map<MyViewModel>(my);
        tm.abcd_id = abcd_id;

        try
        {
            repo.Create(tm);
            my.primarykey_id = tm.primarykey_id;   ///This is most important                           
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("Duplicate Value Found", string.Format("error: {0} already exists", my.abcd));
        }
    }
    else
    {
        ModelState.AddModelError("Error", "Not valid please send data again");
    }

    return Json(new[] { my }.ToDataSourceResult(request, ModelState));
}

Надеюсь, что это может помочь кому-то

Ответ 7

Вы можете вызвать функцию, нажав кнопку "Изменить" и внутри, чтобы обновить сетку:

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

Ответ 8

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

Ответ 9

В случае, если кто-то еще должен знать, как это сделать. Вы можете включить "полную" функцию в своем создании, а также в биты обновления.

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

Ответ 10

Я пытался выяснить, как обновить сетку после создания нового элемента. Сценарий: создание элемента на клиенте, отправка запроса на сервер, получение ответа и обновление клиента. (В качестве альтернативы, я бы не прочь понять, почему сетка не использует элемент, который я возвращаю в функции создания на стороне сервера)

Этот пост упоминает событие requestEnd, но он не отображается в бритве. Это событие, похоже, срабатывает после завершения запроса, то есть после того, как сервер обрабатывает событие, поэтому новые объекты, созданные на клиенте, уже будут отправлены на сервер для обработки; то клиент может запросить самую последнюю информацию без потери данных. Поскольку объект datasource grid был undefined при загрузке страницы, я закончил использование события .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)
    {
    }
}

Если есть лучший способ, я бы с удовольствием узнал.

Чтобы ответить на ваш вопрос, есть события, отличные от "create": "читать", "обновлять"

Ответ 11

с помощью AutoSync(true) в сетке ajax mvc kendo с всплывающим режимом редактирования приводит к тому, что всплывающее окно вообще не появляется.

Поэтому я использую этот

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

Тайм-аут состоит в том, чтобы убедиться, что вы не закончили операцию crud.