Search code examples
jquerykendo-uikendo-ui-grid

In Kendo Grid - Edit option how to hide/show the save button If there are no changes or some changes then show


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:

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');
    });

Solution

  • Here is my answer -

    change: function (e) {
                                    $(".k-grid-update").show();
    }