Kendo Grids and Jquery Checkbox Values

Viewed 1023

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

0 Answers
Related