Sync: 2017-05-29T10:03+03:00

telerik · May 29, 2017 · f09150b · f09150b
1 parent a5bcf84
commit f09150b
Show file tree

Hide file tree

Showing 429 changed files with 650 additions and 444 deletions.
diff --git a/build/package-pro.json b/build/package-pro.json
diff --git a/...controls/data-management/grid/how-to/Selection/grid-selection-to-model-field.md b/...controls/data-management/grid/how-to/Selection/grid-selection-to-model-field.md
@@ -0,0 +1,215 @@
+---
+title: Bind Selection to Model Field with Checkbox Column
+page_title:  Bind Selection to Model Field with Checkbox Column | Kendo UI Grid
+description: "Learn how to select a Kendo UI Grid row with a checkbox column bound to a model field."
+slug: howto_bind_selection_to_model_field
+---
+
+# Bind Selection to Model Field with Checkbox Column
+
+The example below demonstrates how to select a Kendo UI Grid row using a checkbox bound to a field from the model. After checking/unchecking the chechbox, an Update request will be initiated to update the boolean field in the model. 
+
+###### Example 1: SelectAll in the header will update the boolean field in all pages (suitable for scenario with limited amount of records)
+
+```html
+<style>
+    html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
+    [role='gridcell']{
+      box-shadow: none!important;
+    }
+</style>
+
+<div id="example">
+    <div id="grid"></div>
+</div>
+<script>
+    $(document).ready(function () {
+        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
+            dataSource = new kendo.data.DataSource({
+                autoSync: true,
+                transport: {
+                    read:  {
+                        url: crudServiceBaseUrl + "/Products",
+                        dataType: "jsonp"
+                    },
+                    update: {
+                        url: crudServiceBaseUrl + "/Products/Update",
+                        dataType: "jsonp"
+                    },
+                    destroy: {
+                        url: crudServiceBaseUrl + "/Products/Destroy",
+                        dataType: "jsonp"
+                    },
+                    create: {
+                        url: crudServiceBaseUrl + "/Products/Create",
+                        dataType: "jsonp"
+                    },
+                    parameterMap: function(options, operation) {
+                        if (operation !== "read" && options.models) {
+                            return {models: kendo.stringify(options.models)};
+                        }
+                    }
+                },
+                batch: true,
+                
+                pageSize: 10,
+                schema: {
+                    model: {
+                        id: "ProductID",
+                        fields: {
+                            ProductID: { editable: false, nullable: true },
+                            ProductName: { validation: { required: true } },
+                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
+                            Discontinued: { type: "boolean", editable: true },
+                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
+                        }
+                    }
+                }
+            });
+
+        $("#grid").kendoGrid({
+            dataSource: dataSource,
+            navigatable: true,
+            pageable: true,
+            columns: [
+              { field: "Discontinued", width: 120, template: "<input type='checkbox' data-bind='checked:Discontinued' />", headerTemplate: "<input id='checkAll' type='checkbox' onclick='checkAll(this)'/>" },
+                "ProductName",
+                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
+                { field: "UnitsInStock", title: "Units In Stock", width: 120 },                            
+                { command: "destroy", title: "&nbsp;", width: 150 }],
+            dataBound: function(e){
+              e.sender.items().each(function(){
+                var dataItem = e.sender.dataItem(this);
+                kendo.bind(this, dataItem);
+                if(dataItem.Discontinued){
+                  $(this).addClass("k-state-selected");
+                }
+              })
+              
+              $("#checkAll")[0].checked = e.sender.items().find(":checked").length == e.sender.dataSource.view().length;
+            }
+        });
+    });
+  
+  function checkAll(input){
+    var grid = $("#grid").data("kendoGrid");
+    var items = grid.items();
+    items.each(function(){
+     var dataItem = grid.dataItem(this);
+      if(dataItem.Discontinued != input.checked){
+        dataItem.Discontinued = input.checked;
+        dataItem.dirty = true;
+      }
+    })
+    grid.dataSource.sync();
+  }
+</script>
+```
+
+###### Example 2: SelectAll in the header will update the boolean field on the current page only (suitable for scenario with many records)
+
+```html
+<style>
+    html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
+    [role='gridcell']{
+      box-shadow: none!important;
+    }
+</style>
+
+<div id="example">
+    <div id="grid"></div>
+</div>
+<script>
+    $(document).ready(function () {
+        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
+            dataSource = new kendo.data.DataSource({
+                autoSync: true,
+                transport: {
+                    read:  {
+                        url: crudServiceBaseUrl + "/Products",
+                        dataType: "jsonp"
+                    },
+                    update: {
+                        url: crudServiceBaseUrl + "/Products/Update",
+                        dataType: "jsonp"
+                    },
+                    destroy: {
+                        url: crudServiceBaseUrl + "/Products/Destroy",
+                        dataType: "jsonp"
+                    },
+                    create: {
+                        url: crudServiceBaseUrl + "/Products/Create",
+                        dataType: "jsonp"
+                    },
+                    parameterMap: function(options, operation) {
+                        if (operation !== "read" && options.models) {
+                            return {models: kendo.stringify(options.models)};
+                        }
+                    }
+                },
+                batch: true,
+                
+                pageSize: 10,
+                schema: {
+                    model: {
+                        id: "ProductID",
+                        fields: {
+                            ProductID: { editable: false, nullable: true },
+                            ProductName: { validation: { required: true } },
+                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
+                            Discontinued: { type: "boolean", editable: true },
+                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
+                        }
+                    }
+                }
+            });
+
+        $("#grid").kendoGrid({
+            dataSource: dataSource,
+            navigatable: true,
+            pageable: true,
+            columns: [
+              { field: "Discontinued", width: 120, template: "<input type='checkbox' data-bind='checked:Discontinued' />", headerTemplate: "<input id='checkAll' type='checkbox' onclick='checkAll(this)'/>" },
+                "ProductName",
+                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
+                { field: "UnitsInStock", title: "Units In Stock", width: 120 },                            
+                { command: "destroy", title: "&nbsp;", width: 150 }],
+            dataBound: function(e){
+              e.sender.items().each(function(){
+                var dataItem = e.sender.dataItem(this);
+                kendo.bind(this, dataItem);
+                if(dataItem.Discontinued){
+                  $(this).addClass("k-state-selected");
+                }
+              })
+              
+              $("#checkAll")[0].checked = e.sender.items().find(":checked").length == e.sender.dataSource.view().length;
+            }
+        });
+    });
+  
+  function checkAll(input){
+    var grid = $("#grid").data("kendoGrid");
+    var items = grid.items();
+    items.each(function(){
+     var dataItem = grid.dataItem(this);
+      if(dataItem.Discontinued != input.checked){
+        dataItem.Discontinued = input.checked;
+        dataItem.dirty = true;
+      }
+    })
+    grid.dataSource.sync();
+  }
+</script>
+```
+
+## See Also
+
+Other articles on the Kendo UI Grid and how-to examples on the selection functionality:
+
+* [JavaScript API Reference](/api/javascript/ui/grid)
+* [How to Persist Row Selection while Paging, Sorting, and Filtering]({% slug howto_persist_row_selection_paging_sorting_filtering_grid %})
+* [How to Prevent Selection for Checkbox Cells]({% slug howto_prevent_selection_checkbox_cells_grid %})
+* [How to Select Multiple Rows with Checkboxes]({% slug howto_select_multiple_rowswith_checkboxes_grid %})
+
+For more runnable examples on the Kendo UI Grid, browse its [**How To** documentation folder]({% slug howto_create_custom_editors_grid %}).
diff --git a/src/cultures/kendo.culture.af-ZA.js b/src/cultures/kendo.culture.af-ZA.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["af-ZA"] = {
         name: "af-ZA",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.af.js b/src/cultures/kendo.culture.af.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["af"] = {
         name: "af",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.am-ET.js b/src/cultures/kendo.culture.am-ET.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["am-ET"] = {
         name: "am-ET",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.am.js b/src/cultures/kendo.culture.am.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["am"] = {
         name: "am",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-AE.js b/src/cultures/kendo.culture.ar-AE.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-AE"] = {
         name: "ar-AE",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-BH.js b/src/cultures/kendo.culture.ar-BH.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-BH"] = {
         name: "ar-BH",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-DZ.js b/src/cultures/kendo.culture.ar-DZ.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-DZ"] = {
         name: "ar-DZ",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-EG.js b/src/cultures/kendo.culture.ar-EG.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-EG"] = {
         name: "ar-EG",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-IQ.js b/src/cultures/kendo.culture.ar-IQ.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-IQ"] = {
         name: "ar-IQ",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-JO.js b/src/cultures/kendo.culture.ar-JO.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-JO"] = {
         name: "ar-JO",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-KW.js b/src/cultures/kendo.culture.ar-KW.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-KW"] = {
         name: "ar-KW",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-LB.js b/src/cultures/kendo.culture.ar-LB.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-LB"] = {
         name: "ar-LB",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-LY.js b/src/cultures/kendo.culture.ar-LY.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-LY"] = {
         name: "ar-LY",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-MA.js b/src/cultures/kendo.culture.ar-MA.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-MA"] = {
         name: "ar-MA",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-OM.js b/src/cultures/kendo.culture.ar-OM.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-OM"] = {
         name: "ar-OM",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-QA.js b/src/cultures/kendo.culture.ar-QA.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-QA"] = {
         name: "ar-QA",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-SA.js b/src/cultures/kendo.culture.ar-SA.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-SA"] = {
         name: "ar-SA",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-SY.js b/src/cultures/kendo.culture.ar-SY.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-SY"] = {
         name: "ar-SY",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-TN.js b/src/cultures/kendo.culture.ar-TN.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-TN"] = {
         name: "ar-TN",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar-YE.js b/src/cultures/kendo.culture.ar-YE.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar-YE"] = {
         name: "ar-YE",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.ar.js b/src/cultures/kendo.culture.ar.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["ar"] = {
         name: "ar",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.arn-CL.js b/src/cultures/kendo.culture.arn-CL.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["arn-CL"] = {
         name: "arn-CL",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.arn.js b/src/cultures/kendo.culture.arn.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["arn"] = {
         name: "arn",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.as-IN.js b/src/cultures/kendo.culture.as-IN.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["as-IN"] = {
         name: "as-IN",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.as.js b/src/cultures/kendo.culture.as.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["as"] = {
         name: "as",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.az-Cyrl-AZ.js b/src/cultures/kendo.culture.az-Cyrl-AZ.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["az-Cyrl-AZ"] = {
         name: "az-Cyrl-AZ",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.az-Cyrl.js b/src/cultures/kendo.culture.az-Cyrl.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["az-Cyrl"] = {
         name: "az-Cyrl",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.az-Latn-AZ.js b/src/cultures/kendo.culture.az-Latn-AZ.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["az-Latn-AZ"] = {
         name: "az-Latn-AZ",
         numberFormat: {

diff --git a/src/cultures/kendo.culture.az-Latn.js b/src/cultures/kendo.culture.az-Latn.js
@@ -1,4 +1,4 @@
-(function( window, undefined ) {
+(function( window, undefined ) {
     kendo.cultures["az-Latn"] = {
         name: "az-Latn",
         numberFormat: {