Sending the grid to controller via custom cmd

[Julien]

Hello,

I have a nested grid which implements the sortable components. After reordering the rows, i would like to send the reordered grid to my controller so i can update the data in it. I'm not sure i'm using the right approach, but i'm trying to do this with a custom command from the toolbar. My question is simple, how can i send all my grid to my controller after i reordered the rows ? The goal is to change the property "Ordre" if my model. Thank you very much.

Here is my code so far: 

 

//nested grid
<script id="questionsTemplate" type="text/x-kendo-tmpl">
    @(Html.Kendo().Grid<PointVerificationViewModel>()
        .Name("pointGrid_#=Id#")
        .Columns(col =>
        {
            col.Bound(p => p.Libelle);
            col.Bound(p => p.EstBloquant)
                .ClientTemplate("\\#: data && data.EstBloquant ? 'OUI' : 'NON' \\#");
            col.Bound(p => p.Ordre);
            col.Command(cmd =>
            {
                cmd.Edit().Text(" ");
                cmd.Destroy().Text(" ").IconClass("fa fa-times");
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .ToolBar(toolbar =>
        {
            toolbar.Create().IconClass("fa fa-plus").Text("Créer un point de vérification");
            toolbar.Custom().IconClass("fas fa-save").Text("Sauvegarder l'ordre").HtmlAttributes(new { data_role = "saveOrder" });//the custom button i'm trying to use to send my grid
        })
        .Events(e => e.Change("onChange"))
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .PageSize(16)
            .Model(m =>
            {
                m.Id(p => p.Id);
            })
            .Read(a => a.Action("Read", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Get))
            .Create(a => a.Action("Create", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Post))
            .Update(a => a.Action("Update", "PointVerification").Type(HttpVerbs.Put))
            .Destroy(a => a.Action("Delete", "PointVerification").Type(HttpVerbs.Delete))
        )
       .Sortable()
        .ToClientTemplate()
    )


    @(Html.Kendo().Sortable()
        .For("#pointGrid_#=Id#")
        .Filter("table > tbody > tr")
        .Cursor("move")
        .HintHandler("noHint")
        .PlaceholderHandler("placeholder")
        .ContainerSelector("#pointGrid_#=Id# tbody")
        .Events(events => events.Change("onChange"))
        .ToClientTemplate()
)

</script>

<script>
    var noHint = $.noop;

    function placeholder(element) {
        return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    }

    function onChange(e) {
        var id = e.sender.element[0].id;
        var grid = $("#" + id).data("kendoGrid");

        skip = grid.dataSource.skip();
        oldIndex = e.oldIndex + skip;
        newIndex = e.newIndex + skip;
        data = grid.dataSource.data();
        dataItem = grid.dataSource.getByUid(e.item.data("uid"));

        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);
    }

    // I'm trying to send my grid to my controller with this method, but it keeps calling the delete method.
    function onFamilleGridDetailExpand(e) {
        e.detailRow.find("[data-role=saveOrder]").click(function () {
            var grid = e.detailRow.find("[data-role=grid]").data("kendoGrid").saveChanges();
        });
    }
</script>

[Georgi]

Hi Julien,

Based on the provided information I assume that the requirement is to update the Ordre field of the model once the user reorders an item. Please correct me if I am wrong.

Since in your case the dataSource has a specified update configuration, you could update the item using the set method and then save the pending changes using the saveChanges method. This will update the dataItem and then request the server to apply the changes on the back end.

e.g.

function onChange(e) {
    var id = e.sender.element[0].id;
    var grid = $("#" + id).data("kendoGrid");

    skip = grid.dataSource.skip();
    oldIndex = e.oldIndex + skip;
    newIndex = e.newIndex + skip;
    data = grid.dataSource.data();
    dataItem = grid.dataSource.getByUid(e.item.data("uid"));


    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);
    dataItem.set('Ordre', SomeValue);
    grid.saveChanges();
}

Regards,
Georgi
Progress Telerik

[Julien]

Hello,

 

yes, that's what i used. Thank you.