Kendo网格和Jquery复选框值

Question

Afternoon,

First ever post on here, so here goes wish me luck

I've inherited some code and previous developers have used Kendo UI Mvc, with several implementations of Kendo Grids which I am attempting to get my head around.

I have been tasked with extending the grid to add some check boxes onto it, simple so far, when these check boxes are checked we can click a "Save" button and post this to an end point to update the rows in a database.

The problem(s) is that when I do click Save and post, it posts the original model that's rendered, not the new value(s) for the row in the table with the checked checkbox values being true (checked)

Model

public class StockDataModel
    {
        public DataTable DTGrd = new DataTable();
        public int Part_ID { get; set; }
        public string Serial_No { get; set; }
        public bool Reciept_Confirmed { get; set; }
        public bool Doc_Pack_Complete { get; set; }
    }

Grid

<div id="gridWrapp" style="max-width:100%;overflow:auto;">
        @(Html.Kendo().Grid<StockDataModel>()
                     .Name("summary")
                     .Columns
                     (columns =>
                     {
                         foreach (System.Data.DataColumn column in Model.DTGrd.Columns)
                         {
                             columns.Bound(c => c.Part_ID).Hidden(true);
                             switch (column.ColumnName.ToLower())
                             {
                                 case "reciept_confirmed":
                                     columns.Bound(column.ColumnName).Title(column.ColumnName.Replace("_", " "))
                                     //.ClientTemplate("<input type='checkbox' value='\\#= receipt_confirmed \\#' # if (Enabled) { #checked='checked'# } #/>");
                                     //.ClientTemplate("<input id='chkReceiptConfirmed' type='checkbox' #= Reciept_Confirmed checked='checked' :'' # />")
                                     .ClientTemplate("<input id='chkReceiptConfirmed' type='checkbox' class='checkBox' />")
                                     .HtmlAttributes(new { style = "text-align: center" })
                                     .HeaderHtmlAttributes(new { style = "overflow: visible;white-space: normal;" });
                                     break;
                                 case "doc_pack_complete":
                                     columns.Bound(column.ColumnName).Title(column.ColumnName.Replace("_", " "))
                                     //.ClientTemplate("<input type='checkbox' value='\\#= doc_pack_complete \\#' # if (Enabled) { #checked='checked'# } #/>");
                                     //.ClientTemplate("<input id='chkDocPackComplete' type='checkbox' \\#= Doc_Pack_Complete /*? checked='checked' :'' */\\# />")
                                     .ClientTemplate("<input id='chkDocPackComplete' type='checkbox' class='checkBox' />")
                                     .HtmlAttributes(new { style = "text-align: center" })
                                     .HeaderHtmlAttributes(new { style = "overflow: visible;white-space: normal;" });
                                     break;
                             }
                         }
                     }
                     )
                     .Sortable()
                     .Scrollable(s => s.Height(600))
                     .Filterable()
                     .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                     .DataSource
                     (dataSource => dataSource
                        .Ajax()
                        //    .PageSize(20)
                        .Model(model =>
                        {
                            var id = Model.DTGrd.Columns["part_id"].ColumnName;
                            model.Id(id);
                            foreach (System.Data.DataColumn column in Model.DTGrd.Columns)
                            {
                                switch (column.ColumnName.ToLower())
                                {
                                    case "reciept_confirmed":
                                    case "doc_pack_complete":
                                        var field = model.Field(column.ColumnName, column.DataType);
                                        break;
                                }
                            }
                        })
                         .Read(read => read.Action("ReadSummary", "RWM"))
                     //.Update(update => update.Action("UpdateRecords", "RWM"))
                     )
        )
    </div>

JQuery

    $('#Save').click(function () {

        var grid = $("#summary").data("kendoGrid");

        var ds = grid.dataSource.view();
        var models = [];

        for (var i = 0; i < ds.length; i++) {
            var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");

            var chkReceiptConfirmed = $(row).closest("td").find("id='chkReceiptConfirmed'");


            var chkDocPackComplete = $(row).closest("td").find("id='chkDocPackComplete'");
            alert($(chkDocPackComplete).is("input:checked"));

            if ($(chkDocPackComplete).is("input:checked") || $(chkReceiptConfirmed).is("input:checked")) {
                alert(chkDocPackComplete);
                var model = grid.dataItem(row);
                models.push(model);
            }

I have to be going wrong somewhere, so any help is most welcome indeed as to how I actually get the values out of the grid for the new checkboxes

Thanks

Answer 1

When using custom templates, dataSource is not synced with them.

You could consider using removing custom templates ( ClientTemalate(...) ) and enabling in cell grid editing with: .Editable(editable => editable.Mode(GridEditMode.InCell))

Updated Grid:

<div id="gridWrapp" style="max-width:100%;overflow:auto;">
        @(Html.Kendo().Grid<StockDataModel>()
                     .Name("summary")
                     .Columns
                     (columns =>
                     {
                         foreach (System.Data.DataColumn column in Model.DTGrd.Columns)
                         {
                             columns.Bound(c => c.Part_ID).Hidden(true);
                             switch (column.ColumnName.ToLower())
                             {
                                 case "reciept_confirmed":
                                     columns.Bound(column.ColumnName).Title(column.ColumnName.Replace("_", " "))
                                     .HtmlAttributes(new { style = "text-align: center" })
                                     .HeaderHtmlAttributes(new { style = "overflow: visible;white-space: normal;" });
                                     break;
                                 case "doc_pack_complete":
                                     columns.Bound(column.ColumnName).Title(column.ColumnName.Replace("_", " "))
                                     .HtmlAttributes(new { style = "text-align: center" })
                                     .HeaderHtmlAttributes(new { style = "overflow: visible;white-space: normal;" });
                                     break;
                             }
                         }
                     }
                     )
                     .Editable(editable => editable.Mode(GridEditMode.InCell))
                     .Sortable()
                     .Scrollable(s => s.Height(600))
                     .Filterable()
                     .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                     .DataSource
                     (dataSource => dataSource
                        .Ajax()
                        //    .PageSize(20)
                        .Model(model =>
                        {
                            var id = Model.DTGrd.Columns["part_id"].ColumnName;
                            model.Id(id);
                            foreach (System.Data.DataColumn column in Model.DTGrd.Columns)
                            {
                                switch (column.ColumnName.ToLower())
                                {
                                    case "reciept_confirmed":
                                    case "doc_pack_complete":
                                        var field = model.Field(column.ColumnName, column.DataType);
                                        break;
                                }
                            }
                        })
                         .Read(read => read.Action("ReadSummary", "RWM"))
                     //.Update(update => update.Action("UpdateRecords", "RWM"))
                     )
        )
    </div>

Updated jQuery:

   $('#Save').click(function () {

        var grid = $("#summary").data("kendoGrid");

        var ds = grid.dataSource.view();
        var models = [];

        for (var i = 0; i < ds.length; i++) {
            var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
            var model = grid.dataItem(row); // or just use ds[i]

            if (model.Reciept_Confirmed || model.Doc_Pack_Complete) {
                alert(model.Doc_Pack_Complete);
                models.push(model);
            }