-1

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');
    });
Kumas
  • 1
  • 7
  • Can you add a snippet or codepen or jsfiddle? Thanks! – Rojo Feb 20 '19 at 02:20
  • Thanks for the response, I have already shared my Grid code and also Image How the Grid Edit looks – Kumas Feb 20 '19 at 03:14
  • @Kumas a working demo would be great since your code is pretty messed up full of syntax errors. People who want to help have to fix them before actually find a solution for you. – DontVoteMeDown Feb 20 '19 at 11:40
  • As I said, I don't have time to fix your code to give you an answer. If you had provided a demo, I could do it faster. Anyway, my short answer is that you have to give up of that *command* button and create your own with a template, check for `dirty` property yourself and show/hide whenever you want. And then program yourself the `save`, `update` actions on it(which means to call kendo's save/update functions in an event). The best I get is this: https://dojo.telerik.com/EzODukuC good luck. – DontVoteMeDown Feb 20 '19 at 11:55
  • Hello Sir, Thanks for your response, I have added the working code in my post, I have refered your link, its not working as expected, because I need to disable only SAVE button , unless user make changes to text box, movement they make any changes to grid, then Save button as to be SHOWN – Kumas Feb 20 '19 at 16:41
  • Please help me, I am new to KENDO UI – Kumas Feb 20 '19 at 16:41
  • @Kumas I need the HTML and CSS along with the JS. Just giving JS sometimes doesn't always help. Copy ALL the code you have to [Codepen](https://codepen.io/pen/) or [JSFiddle](https://jsfiddle.net/). Don't worry, they're safe. :) – Rojo Feb 20 '19 at 22:52
  • Thank you so much for your response, I am able to do this like - change: function (e) { $(".k-grid-update").show(); } – Kumas Feb 23 '19 at 20:59

1 Answers1

0

Here is my answer - 

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