hi,
we have a grid with batch edit and a check box in the column. this check box can be changed in the view mode also. while editing data is not updated in the UI and check box is also not working like not editable. we are using 2016 kendo with angularJs.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
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: 20,
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" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 ,
template: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>', editor: '<input ng-model = "dataItem.Discontinued" id ="qw_#=ProductName#" type="checkbox" ng-change="getClick(dataItem)" class = "k-checkbox"></input><label for="qw_#=ProductName#" class="k-checkbox-label"></label>'},
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Please accept my apology for the delay in responding.
To achieve the desired behaviour, there are a few changes that should take place:
- Instead of binding the Discontinued column to the field of the dataItem, make it a template column, e.g:
{ title: "Discontinued", template: '<input ng-model="dataItem.Discontinued" id="qw_#=ProductName#" type="checkbox"class="k-checkbox" ng-click="getClick(dataItem)"/><label for="qw_#=ProductName#" class="k-checkbox-label" ></label>', width: 120 }This will stop the grid entering in edit mode.
- add the k-dirty flag programmatically for consistency with the rest of the fields
Since this is a navigatable grid, you may use the current() method of the grid to get the focused cell:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-current
Then, prepend the dirty flag which is a span like below:
"<span class='k-dirty'></span>"For your convenience, I have created a runnable demo using this approach at:
http://dojo.telerik.com/ULESa
Alex Hajigeorgieva
Telerik by Progress