Could you please let me know how to Hide/Show the Save button based on whether the user made some changes to Edit textboxes, like If there are no changes are made to edit textbox, then we should HIDE the SAVE button. If the user makes any changes to Edit textboxes then we should SHOW the SAVE button.
Grid image:
Here is my code:
$(function() {
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
data: [{ SystemName: "SysTest", SystemID: "789" }],
serverPaging: false,
serverSorting: false,
serverFiltering: false,
batch: true,
/*filter: { logic: 'and', filters: [] }, //set the default it is passed as a value
sort: [], //set the default it is passed as a value */
schema: {
//data: "Items",
model: {
id: "SystemID",
fields: {
SystemName: { editable: true, nullable: true, type: "string" },
SystemID: { editable: false, nullable: false },
}
}
}
}),
columns: [
{
field: "SystemName",
title: "Some Name",
horizontalAlign: "left",
headerAttributes: { style: "text-align: left; width: 75%;" },
width: '45%',
encoded: false,
name: "SystemName"
}, {
field: "SystemID",
title: "SystemID",
horizontalAlign: "left",
headerAttributes: { style: "text-align: left; width: 75%;" },
width: '25%',
encoded: false,
name: "SystemID"
},
{
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",
sortable: false,
resizable: true,
autoBind: true,
navigateHierarchyCell: true,
persistSelections: true,
pageable: false,
autoResizeHeight: false
}).data('kendoGrid');
});
Here is my answer -
change: function (e) {
$(".k-grid-update").show();
}