Comment puis-je rafraîchir la grille Après avoir édité la grille de Kendo UI?

ajouter des événements dans 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();
            }
        }
    },

la réponse acceptée peut causer un comportement inattendu si vous utilisez la validation côté serveur. L'événement de synchronisation se déclenche chaque fois qu'une mise à jour est envoyée au serveur, que la requête ait été réussie ou non, donc si la requête déclenche des erreurs de validation côté serveur (ou toute autre erreur) la grille sera toujours mise à jour et toutes les modifications Perdues. Je suis toujours en train de regarder ceci, mais la meilleure solution que j'ai trouvée est d'utiliser les sources de données onrequestend() event et de vérifier manuellement les erreurs, donc quelque chose comme le dessous de

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

cela rafraîchira la grille

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

si .page(1) ne fonctionne pas essayer .lire, mais il doit

Utilisez ceci si vous voulez rafraîchir la grille.

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

Vous pouvez appeler une fonction sur le bouton éditer cliquez et à l'intérieur que vous pouvez rafraîchir la grille:

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

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

Dans le cas où quelqu'un d'autre a besoin de savoir comment faire cela. Vous pouvez inclure la fonction" complete " dans votre create ainsi que des bits de mise à jour.

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

je suis d'accord que c'est une très vieille question, mais malheureusement j'ai aussi été victime de cette erreur il y a quelques jours. Mon scénario était le suivant:

1. première fois que j'ai pu insérer un nouvel enregistrement dans la base de données en utilisant la méthode popup
2. si j'ajoute un autre enregistrement dans la même grille sans rafraîchir, la grille envoie les deux enregistrements au serveur, et conduit malheureusement à une erreur de valeur dupliquée.

enfin je pense que j'ai une solution pour mon problème, Je ne réglais pas valeur clé primaire de mon enregistrement lorsque je l'insère dans la base de données et renvoie cet objet.

ci-dessous est mon code de grille 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 })
    )
)

ci-dessous est le code de gestion des erreurs

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

Serveur De Code

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

Espérons que cela pourrait aider quelqu'un

j'ai essayé de comprendre comment rafraîchir la grille Après avoir créé un nouvel élément. Le scénario est: créer un élément dans le client, envoyer la requête au serveur, recevoir la réponse et mettre à jour le client. (Alternativement, Je n'hésiterais pas à comprendre pourquoi la grille n'utilise pas l'élément que je renvoie dans la fonction create côté serveur)

Ce post mentionne l' requestEnd événement, mais il n'est pas exposé au rasoir. Cet événement semble le feu après une demande est fini, c'est à dire après le serveur traite l'événement, de sorte que les nouveaux objets créés sur le client seront déjà envoyés au serveur pour traitement; alors le client peut demander les dernières informations sans perdre de données. Comme l'objet DataSource grid n'était pas défini lors du chargement de la page, j'ai fini par utiliser le .Change événement à crochet requestEnd événement.

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

et puis le 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)
    {
    }
}

S'il y a un meilleur moyen, j'aimerais le savoir.

pour répondre À votre question, il y a des événements autre que "créer": "lire", "mise à jour"

en utilisant AutoSync(true) en ajax mvc grille de kendo ayant pop up mode edit provoque la pop up à ne pas apparaître du tout.

alors je l'utilise

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

le temps d'arrêt est de s'assurer que vous ne dépassez pas l'opération crud.