Kendo网格和Jquery复选框值

Question

下午，

首先发布在这里，所以这里祝你好运

我继承了一些代码，之前的开发人员已经使用了Kendo UI Mvc，以及我试图了解的几个Kendo网格实现。

我的任务是扩展网格以在其上添加一些复选框，到目前为止很简单，当选中这些复选框时，我们可以单击“保存”按钮并将其发布到终点以更新数据库中的行。

问题在于，当我单击“保存并发布”时，它会发布已呈现的原始模型，而不是表中行的新值，并且选中的复选框值为true（已选中）

模型

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

格

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

我必须在某个地方出错，所以任何帮助都非常受欢迎，因为我实际上是如何从网格中获取新复选框的值

谢谢

Answer 1

使用自定义模板时， dataSource不会与它们同步。

您可以考虑使用删除自定义模板（ ClientTemalate(...) ）并在单元格网格编辑中启用： .Editable(editable => editable.Mode(GridEditMode.InCell))

更新网格：

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

更新了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);
            }