kendo ui - pageable - ¿Cómo puedo actualizar la cuadrícula después de editar la cuadrícula de la interfaz de usuario de Kendo?

kendo grid pageable jquery

Question

Edito la cuadrícula usando editable: "popup" como se muestra en la página de demostración de Telerik. Después de editar la cuadrícula, quiero que la cuadrícula se actualice. ¿La cuadrícula tiene algún evento al que se llama después de editar la cuadrícula?

Traté de usar el evento de base de datos. En este caso, hago que se lea la fuente de datos, pero me dice que es un bucle infinito para actualizar la cuadrícula. Intenté usar el evento saveChanges, pero no está funcionando.

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

Añadir eventos en 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 2

En caso de que alguien más necesite saber cómo hacerlo. Puede incluir la función "completa" en su creación, así como los bits de actualización.

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

Answer 3

Esto refrescará la cuadrícula

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

Si .página (1) no funciona, intente .read, pero debería

Answer 4

Estoy de acuerdo en que esta es una pregunta muy antigua, pero desafortunadamente, también fui víctima de este error hace unos días. Mi escenario era

1. La primera vez que pude insertar un nuevo registro en la base de datos utilizando el método emergente
2. Si agrego otro registro en la misma cuadrícula sin actualizar, la cuadrícula está enviando ambos registros al servidor y, desafortunadamente, genera un error de valor duplicado.

Finalmente, creo que obtuve una solución para mi problema, no estaba configurando el valor de la clave principal en mi registro cuando lo inserto en la base de datos y devolví ese objeto.

Abajo esta mi codigo de kendo

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

A continuación se muestra el código de manejo de errores

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

Código del servidor

 [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));
}

Espero que esto pueda ayudar a alguien

Answer 5

He estado tratando de averiguar cómo actualizar la cuadrícula después de crear un nuevo elemento. El escenario es: crear un elemento en el cliente, enviar una solicitud al servidor, recibir respuesta y actualizar el cliente. (Alternativamente, no me importaría averiguar por qué la cuadrícula no está utilizando el elemento que estoy devolviendo en la función de creación del lado del servidor)

Esta publicación menciona el evento requestEnd , pero no está expuesto en la maquinilla de afeitar. Este evento parece activarse después de que finaliza una solicitud, es decir, después de que el servidor procesa el evento, por lo que los nuevos objetos creados en el cliente ya serán enviados al servidor para su procesamiento; entonces el cliente puede solicitar la información más reciente sin perder datos. Como el objeto de .Change datos de la cuadrícula no estaba definido en la carga de la página, terminé usando el evento .Change para conectar el evento 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"))
)

y luego el 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)
    {
    }
}

Si hay una mejor manera, me encantaría saberlo.

Para responder a su pregunta, hay eventos distintos de "crear": "leer", "actualizar"

Answer 6

La respuesta aceptada puede causar un comportamiento inesperado si está utilizando la validación del lado del servidor. El evento de sincronización se activa cada vez que se envía una actualización al servidor, independientemente de si la solicitud fue exitosa, por lo tanto, si la solicitud desencadena errores de validación del lado del servidor (o cualquier otro error), la cuadrícula aún se actualizará y se perderán los cambios. Sigo viendo esto, pero la mejor solución que he encontrado es usar los orígenes de datos en el evento RequerirEnd () y verificar manualmente los errores, por lo que a continuación se presenta algo como:

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 7

Puede llamar a una función en su botón de edición y, dentro, puede actualizar la cuadrícula:

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

Answer 8

Puede suscribirse al evento Sync del origen de datos de la cuadrícula y llamar al método de lectura de su origen de datos.

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

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

Answer 9

Utilice esto si desea actualizar la cuadrícula.

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

Answer 10

el uso de AutoSync(true) en ajax mvc kendo grid con el modo de edición emergente hace que la ventana emergente no se muestre en absoluto.

Asi que uso esto

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

El tiempo de espera es para asegurarse de no sobrepasar la operación cruda.

Answer 11

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