Kendo网格和Jquery复选框值

时间:2018-12-17 14:41:40

标签: javascript jquery kendo-grid

下午

这是有史以来的第一篇文章,所以祝我好运

我继承了一些代码,以前的开发人员使用Kendo UI Mvc,并尝试了Kendo Grids的几种实现。

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

问题是,当我确实单击“保存并发布”时,它会发布渲染的原始模型,而不是表中该行的新值,且已选中的复选框值为true(已选中)< / p>

型号

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

我必须在某个地方出错,因此,对于我实际上如何从新复选框中获取值的方式,确实是最欢迎的帮助

谢谢

1 个答案:

答案 0 :(得分:0)

使用自定义模板时,function convertToIndianCurrency(x){ return x.toLocaleString('en-IN'); } console.log(convertToIndianCurrency(123456.789));未与它们同步。

您可以考虑使用删除自定义模板(dataSource)并使用ClientTemalate(...)

启用单元格网格编辑

更新的网格:

.Editable(editable => editable.Mode(GridEditMode.InCell))

更新的jQuery:

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