CODEWITHSUNDEEP
javascriptc#asp.nettelerik-gridtelerik-mvc
Adrian773
Adrian773

Reputation: 493

How to disable the "Save Changes" button until changes are made?

I'm using an editing mechanism similar to the example Grid Batch Editing, but my buttons look at lot different.

enter image description here

Because of this difference it would make a lot of sense to have the save changes and cancel button disabled changes are made and then when you press the save or cancel button they should disable again. How do I achieve this?

Upvotes: 0

Views: 3385

Answers (2)

Adrian773
Adrian773

Reputation: 493

Managed to answer my own question here.

Function for changing the buttons state:

function changeSaveAndCancelButtonState(enable) {
    $(".k-grid-save-changes").kendoButton({ enable: false })
        .data("kendoButton").enable(enable);
    $(".k-grid-cancel-changes").kendoButton({ enable: false })
        .data("kendoButton").enable(enable);
}

To enable buttons when you edit data (regular cell):

@(Html.Kendo().Grid<DeuarTestValue>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(c => c.Sample).Editable("enabledRegularEdit");
      })
    // Insert code for data source etc etc
);

function enabledRegularEdit() {
    changeSaveAndCancelButtonState(true);

    // return true to indicate that this the cell can be edited
    return true;
}

To disable the buttons by default and on click:

function disableSaveAndCancelButtonState() {
    changeSaveAndCancelButtonState(false);
}

// Disable themselves on-click
var but = $(".k-grid-save-changes").kendoButton({ click: disableSaveAndCancelButtonState });
var but = $(".k-grid-cancel-changes").kendoButton({ click: disableSaveAndCancelButtonState });

// And Disable them by default.
changeSaveAndCancelButtonState(false);

Note: This doesn't take into consideration whether the cell was actually edited, simply that the cell was taken into edit mode. If anybody knows how to make it work only when edits are properly made?

Since the picture in the post has check boxes, they need to be handled a little bit differently because they aren't edited via the standard Editable function.

To enable buttons when you edit data (checkbox's):

columns.Bound(c => c.Approved)
    .ClientTemplate("<input type='checkbox' #= Approved ? checked='checked' : '' # class='Approvedchkbx'/>")
    .Editable("disableEdit");

function disableEdit() {
    return false;
}
$("#grid .k-grid-content").on("change", ".Approvedchkbx", function (e) {
    var grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));

    changeSaveAndCancelButtonState(true);
    dataItem.set("Approved", this.checked);
});

Upvotes: 1

forJ
forJ

Reputation: 4617

You can disable the button right after its click and make sure they get enabled back on when your job is done.

$('#your-button').on('click', function (e) {
    e.preventDefault();

    $(this).prop('disabled', true);

    //Do your work

    //Once everything is done

    $(this).prop('disabled', false);
})

Upvotes: -1

Related Questions