web-dev-qa-db-fra.com

Comment puis-je actualiser la grille après avoir modifié la grille de Kendo UI?

Je modifie la grille avec editable: "popup"comme indiqué sur la page de démonstration de Telerik. Après avoir modifié la grille, je souhaite qu'elle soit actualisée. La grille a-t-elle un événement appelé après ma modification?

J'ai essayé d'utiliser l'événement databound. Dans ce cas, je fais lire la source de données, mais elle me dit que c'est une boucle infinie pour actualiser la grille. J'ai essayé d'utiliser l'événement saveChanges, mais cela ne fonctionne pas.

@(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"))
))
kendo-uikendo-gridkendo-asp.net-mvc
32
Sarly

Vous pouvez vous abonner à l'événement Sync de la source de données de la grille et appeler la méthode de lecture de sa source de données.

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

function sync_handler(e) {
   this.read();
}
43
Atanas Korchev

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();
            }
        }
    },
17
TrieuH

La réponse acceptée peut provoquer 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 aboutisse ou non. Par conséquent, 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. Toujours à la recherche de ceci, mais la meilleure solution que j'ai trouvée consiste à utiliser l'événement onRequestEnd() de la source de données et à vérifier manuellement les erreurs.

Par exemple:

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

Cela va actualiser la grille

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

si .page (1) ne fonctionne pas, essayez .read, mais cela devrait

4
CSharper

Utilisez cette option si vous souhaitez actualiser la grille.

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

Je conviens que cette question est très ancienne, mais malheureusement, j’ai également été victime de cette erreur il ya quelques jours. Mon scénario était

  1. La première fois que j'ai pu insérer un nouvel enregistrement dans la base de données à l'aide de la méthode contextuelle
  2. Si j'ajoute un autre enregistrement dans la même grille sans actualisation, la grille envoie les deux enregistrements au serveur et entraîne malheureusement une erreur de valeur en double.

Enfin, je pense avoir une solution à mon problème, Je ne mettais pas la valeur de clé primaire dans mon enregistrement lorsque je l'insérais dans la base de données et que je retournais cet objet.

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

Code serveur

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

J'espère que cela pourrait aider quelqu'un

3
Sandesh Daddi

Au cas où quelqu'un d'autre aurait besoin de savoir comment faire cela. Vous pouvez inclure la fonction "complète" dans vos bits de création et de mise à jour.

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

Vous pouvez appeler une fonction sur le bouton de modification du bouton de modification et à l'intérieur, vous pouvez actualiser la grille:

function EditRow(){
     var grid = $("#YourGridName").data("kendoGrid");
     grid.dataSource.read();              
}
1
user3040830
.sync: function (e) {
this.read();
},
1
Matthew J Coffman

utiliser AutoSync(true) dans ajax mvc la grille de kendo ayant le mode d'édition en incrustation empêche l'affichage de la pop-up.

Donc 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 mort est de vous assurer que vous ne chevauchez pas l'opération crud.

0
Rohit Vipin Mathews

J'ai essayé de comprendre comment actualiser la grille après avoir créé un nouvel élément. Le scénario est le suivant: créer un élément dans le client, envoyer une demande au serveur, recevoir une réponse et mettre à jour le client. (Sinon, je ne verrais pas d'inconvénient à comprendre pourquoi la grille n'utilise pas l'élément que je retourne dans la fonction de création côté serveur)

Ce post mentionne l'événement requestEnd, mais il n'est pas exposé au rasoir. Cet événement semble se déclencher à la fin d'une requête, c'est-à-dire après que le serveur l'a traité. Ainsi, les nouveaux objets créés sur le client seront déjà envoyés au serveur pour traitement. le client peut alors demander les dernières informations sans perdre de données. Comme l’objet source de données de grille n’était pas défini au chargement de la page, j’ai fini par utiliser le .Change événement pour lier l'événement 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"))
)

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 une meilleure façon, j'aimerais savoir.

Pour répondre à votre question, il existe des événements autres que "créer": "lire", "mettre à jour"

0
BurnsBA