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
$('').insertAfter('input:text');
My complete working code:
$(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") {
$('').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: " ", width: "50%"
}
],
editable: "inline",
// edit: gridEdit,
sortable: false,
resizable: true,
autoBind: true,
navigateHierarchyCell: true,
persistSelections: true,
pageable: false,
autoResizeHeight: false
}).data('kendoGrid');
});
Navaneeth KrishnanPosted Feb 20, 2020, 7:00 AM