Submit form with Kendo MVC Grid and other elements

Question

I am trying to get a form containing a Kendo MVC grid and other elements to submit.

• The View model contains contains three string fields and an IEnumer

Answer 1

I was inspired by codebeastie and @user1878526 to produce the following hybrid idea - simply returning the grid as a list of strings to the controller save action:

Controller:

Function Save(ThisForum As myModel, gridData As List(Of String)) As ActionResult

View:

$("#myForm").submit(function (event) {
    var grid = $("#myGrid").data("kendoGrid");
    var data = grid.dataSource.view();
    var input;
    for (var i = 0; i < data.length; i++) {
        var s = JSON.stringify(data[i]).replace(/["']/g, "");
        input = $("<input>", { type: 'hidden', name: 'data[' + i + ']', value: s });
        $(this).append($(input));
    }
})

This can then be parsed in the controller reasonably easily by Spliting on commas and colons.

Answer 2

I have exactly this scenario working perfectly in my project. Here's my grid declaration...

@(Html.Kendo().Grid(Model.ChildLines)
    .Name("RequestLinesGrid")
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
         .Columns(columns =>
         {
             columns.Bound(p => p.ItemCode).ClientTemplate("#= ItemCode #" +
               "<input type='hidden' name='MyLines[#= index(data)#].ItemCode' value='#= ItemCode #' />"
             );
             columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
               "<input type='hidden' name='MyLines[#= index(data)#].Description' value='#= Description #' />"
             );
             columns.Bound(p => p.UoM).ClientTemplate("#= UoM #" +
               "<input type='hidden' name='MyLines[#= index(data)#].UoM' value='#= UoM #' />"
             );
             columns.Bound(p => p.QtyCC).ClientTemplate("#= QtyCC #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyCC' value='#= QtyCC #' />"
             );
             columns.Bound(p => p.QtyEmployee).ClientTemplate("#= QtyEmployee #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyEmployee' value='#= QtyEmployee #' />"
             );
             columns.Bound(p => p.ItemListLineID).Hidden(true).ClientTemplate("#= ItemListLineID #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListLineID' value='#= ItemListLineID #' />"
             );
             columns.Bound(p => p.ItemListCode).Hidden(true).ClientTemplate("#= ItemListCode #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListCode' value='#= ItemListCode #' />"
             );
             columns.Command(command =>
             {
                 command.Destroy();
             }).Width(200);
         })
    .DataSource(dataSource => dataSource.Ajax()
         .Model(m =>
         {
             m.Id(p => p.ItemCode);
             m.Field(p => p.ItemCode).Editable(false);
             m.Field(p => p.Description).Editable(false);
             m.Field(p => p.UoM).Editable(false);
             m.Field(p => p.QtyCC).Editable(true);
             m.Field(p => p.QtyEmployee).Editable(true);
             m.Field(p => p.ItemListLineID).Editable(false);
             m.Field(p => p.ItemListCode).Editable(false);
         })
         .Batch(true)
         .ServerOperation(false)
         // these are dummy action methods that don't really exist.
         .Update("upd", "upd") 
         .Destroy("del", "del")
         .Create("cre", "cre")
    )
    .Navigatable()
)

Here's the "index" function:

function index(dataItem) {
    var data = $("#RequestLinesGrid").data("kendoGrid").dataSource.data();

    return data.indexOf(dataItem);
}

Answer 3

So here is part of a solution to your question. I extended the kendo Datasource, so you can call this function and get all the updated, deleted, created items out. Just turn it into json and send it back with the rest of your form fields. I have got this working now. Thought I would share.

kendo.data.DataSource.prototype.GetUnsavedData = function () {
    var that = this,
        idx,
        length,
        created = [],
        updated = [],
        destroyed = that._destroyed,
    allRows = [],
        data = that._flatData(that._data);

    for (idx = 0, length = data.length; idx < length; idx++) {
        if (data[idx].isNew()) {
            created.push(data[idx]);
        } else if (data[idx].dirty) {
            updated.push(data[idx]);
        }
    }

    allRows = created.concat(updated).concat(destroyed);
    var allRowsJSON = JSON.stringify(allRows);
    return allRowsJSON;
}