Enabled standard grid selection as well.

Author: martin atanasov

grid/grid-selection-by-field/SelectionByField/Controllers/HomeController.cs

@@ -52,14 +52,19 @@ public ActionResult Get_Products([DataSourceRequest] DataSourceRequest dsRequest
             return Json(result);
         }
 
-        public ActionResult Select_Product(Product product)
+        public ActionResult Select_Products(List<Product> productsList)
         {
-            var toUpdate = products.FirstOrDefault(p => p.ProductID == product.ProductID);
-            toUpdate.Discontinued = product.Discontinued;
+            foreach (Product product in productsList)
+            {
+                var toUpdate = products.FirstOrDefault(p => p.ProductID == product.ProductID);
+                toUpdate.Discontinued = product.Discontinued;
+
+            }
             return Json(AreAllSelected());
+
         }
 
-        public ActionResult Select_Products(bool checkAll)
+        public ActionResult Select_AllProducts(bool checkAll)
         {
             foreach (var product in products)
             {

grid/grid-selection-by-field/SelectionByField/Views/Home/Index.cshtml

@@ -1,13 +1,12 @@
 @{
     ViewBag.Title = "Home Page";
 }
-
 @(Html.Kendo().Grid<SelectionPersistence.Models.Product>()
     .Name("grid")
     .Columns(columns =>
     {
         columns.Bound(p => p.ProductName);
-        columns.Bound(p => p.UnitPrice).Width(120);
+        columns.Bound(p => p.UnitPrice).Width(120).Format("{0:c}");
         columns.Bound(p => p.UnitsInStock).Width(120);
         columns.Bound(p => p.Discontinued)
         .ClientTemplate(@"# if (Discontinued) { #
@@ -17,9 +16,13 @@
                           # } #")
         .HeaderTemplate("<input type='checkbox' class='checkAll' />").Width(120);
     })
+    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
     .Pageable()
     .Scrollable()
-    .Events(ev=>ev.DataBound("dataBound"))
+    .Events(ev => ev
+            .DataBound("dataBound")
+            .Change("changed")
+            )
     .HtmlAttributes(new { style = "height:550px;" })
     .DataSource(dataSource => dataSource
         .Ajax()
@@ -28,72 +31,107 @@
         .Read(read => read.Action("Get_Products", "Home"))
     )
 )
-
+<div id="count"></div>
 <script>
-    var allChecked = @Html.Raw(Json.Encode(Model));
+    var allChecked = @Html.Raw(Json.Encode(Model)),
+    bound = false;
+    function changed(e)
+    {
+        if(!bound)
+        {
+            var grid = e.sender,
+                selected = grid.select(),
+                data= {productsList : []}
+
+            selected.each(function(){
+                var dataItem = grid.dataItem(this),
+                    checked = $(this).find("input:checkbox").prop("checked");
+
+                data.productsList.push({
+                    ProductId: dataItem.ProductID,
+                    ProductName: dataItem.ProductName,
+                    UnitPrice: dataItem.UnitPrice,
+                    UnitsInStock: dataItem.UnitsInStock,
+                    Discontinued: !checked
+                })
+            });
+
+            updateData(grid, data);
+        }
+
+    }
 
     function dataBound(e) {
+        bound = true;
         var rows = this.tbody.find("tr");
+        var grid = e.sender;
         rows.each(function () {
             var row = $(this);
             if (row.find("input[checked='checked']").length > 0) {
-                row.addClass("k-state-selected");
+                grid.select(row);
             }
         });
+        bound = false;
     }
 
-    function checkHeader() {
-        if (allChecked) {
-            $(".checkAll").prop("checked", "checked");
+    function updateData(grid, data){
+        $.ajax({
+            url: '@Url.Action("Select_Products", "Home")',
+            data: data,
+            type: "POST",
+            success: function (res) {
+                checkHeader(res);
+                grid.dataSource.fetch();
+            }
+        });
+    }
+
+    function checkHeader(res) {
+        if(res)
+        {
+            grid.thead.find(".checkAll").prop('checked', 'checked');
+        }
+        else
+        {
+            grid.thead.find(".checkAll").removeProp("checked");
         }
     }
 
-    $(document).ready(function () {
-        var grid = $("#grid").data("kendoGrid");
-        grid.table.on("click", ".checkbox", selectRow);
-        grid.thead.on("click", ".checkAll", selectAll);
+    function selectRow() {
+        var checked = this.checked,
+        row = $(this).closest("tr"),
+        dataItem = grid.dataItem(row);
 
-        function selectRow() {
-            var checked = this.checked,
-            row = $(this).closest("tr"),
-            grid = $("#grid").data("kendoGrid"),
-            dataItem = grid.dataItem(row);
+        var data = {productsList:[{
+            ProductId: dataItem.ProductID,
+            ProductName: dataItem.ProductName,
+            UnitPrice: dataItem.UnitPrice,
+            UnitsInStock: dataItem.UnitsInStock,
+            Discontinued: checked}]
+        };
 
-            $.ajax({
-                url: '@Url.Action("Select_Product", "Home")',
-                data: {
-                    ProductId: dataItem.ProductID,
-                    ProductName: dataItem.ProductName,
-                    UnitPrice: dataItem.UnitPrice,
-                    UnitsInStock: dataItem.UnitsInStock,
-                    Discontinued: checked
-                },
-                type: "POST",
-                success: function (selectAll) {
-                    if (selectAll) {
-                        grid.thead.find(".checkAll").prop("checked", "checked");
-                    } else {
-                        grid.thead.find(".checkAll").removeProp("checked");
-                    }
-                    grid.dataSource.fetch();
-                }
-            });
-        }
+        updateData(grid, data);
+    }
 
-        function selectAll() {
-            var checked = this.checked;
-            $.ajax({
-                url: '@Url.Action("Select_Products", "Home")',
-                data: {
-                    checkAll:checked
-                },
-                type: "POST",
-                success: function () {
-                    grid.dataSource.fetch();
-                }
-            });
-        }
+    function selectAll() {
+        var checked = this.checked;
+        $.ajax({
+            url: '@Url.Action("Select_AllProducts", "Home")',
+            data: {
+                checkAll:checked
+            },
+            type: "POST",
+            success: function () {
+                grid.dataSource.fetch();
+            }
+        });
+    }
+
+    $(document).ready(function () {
+        grid = $("#grid").data("kendoGrid");
+        grid.table.on("click", ".checkbox", selectRow);
+        grid.thead.on("click", ".checkAll", selectAll);
 
-        checkHeader();
+        checkHeader(allChecked);
     });
 </script>