Post
Ask Question
Kannan AU

Kannan AU

  • NA
  • 57
  • 24.5k

How to manually add the K-Dirty to Kendo Edit Grid

Feb 23 2019 3:06 PM
Dear All,
If user clicks on EDIT button in the grid then If I start editing textbox, then colour of the textbox should change to Red in the Left corner, as shown in the image, please suggest me How I can do this ?
Its possible by default Kendo property by setting editable:true, but I am using "inline", hence I have to add the red color manually
Here is my code, At present its make the red color to all the text boxes, But I want to display the red colour only whichever text boxes are edited.
Please helpme
$('<span class="k-dirty"></span>').insertAfter('input:text');
 
 My complete working code:
 
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-custom-validation">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
data: [{ SystemName: "SysTest", SystemID: "789",System: "Hello"}],
serverPaging: false,
serverSorting: false,
serverFiltering: false,
change: function (e) {
if (e.action === "itemchange") {
$('<span class="k-dirty"></span>').insertAfter('input:text');
}
},
batch: true,
schema: {
//data: "Items",
model: {
id: "SystemID",
fields: {
SystemName: { editable: true},
SystemID: { editable: true},
System: { editable: true},
}
}
}
}),
columns: [
{
field: "SystemName",
title: "Some Name",
width: '45%',
encoded: false,
name: "SystemName"
}, {
field: "SystemID",
title: "System ID",
width: '25%',
encoded: false,
name: "SystemID"
},
{
field: "System",
title: "System",
width: '25%',
encoded: false,
name: "System"
},
{
command: [{
name: "edit",
text: {
edit: "Edit", // This is the localization for Edit button
update: "Save", // This is the localization for Update button
cancel: "Cancel" // This is the localization for Cancel button
}
}], title: "&nbsp;", width: "50%"
}
],
editable: "inline",
// edit: gridEdit,
sortable: false,
resizable: true,
autoBind: true,
navigateHierarchyCell: true,
persistSelections: true,
pageable: false,
autoResizeHeight: false
}).data('kendoGrid');
});
</script>
</div>
</body>
</html>
 
 

Answers (1)