Following the example on https://www.igniteui.com/grid/basic-editing
I am able to initiate the edit in the igGrid, however, unlike the sample, the events that enable or disable the save, undo and redo are not working. If I click the saveChanges button, the button does disable. All the examples I have run across are for editing using the Chaining method and not the GridModel.
I feel like there is something I'm missing or overlooking with the GridModel, like I can't mix the code that is used for Chaining with the GridModel and I have to use a different approach for triggering edits?
Here is a snippet of the view code, focusing only on the save button:
<input type="button" id="saveChanges" class="button-style" value="Save" /> @(Html.Infragistics().Grid(Model)) <script type="text/javascript"> function customControlLogic() { // debugger; var grid; grid = $("#docGrid"); $("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: false }); grid.on("iggriddatabinding", function (e, args) { alert('binding'); }); grid.on("iggriddatabound", function (e, args) { alert('bound'); }); grid.on("iggridupdatingrowdeleted", function (e, args) { //$("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingrowadded", function (e, args) { //$("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); }); grid.on("iggridupdatingeditrowended", function (e, args) { if (args.update) { //$("#undo").igButton("option", "disabled", false); $("#saveChanges").igButton("option", "disabled", false); } }); $("#saveChanges").on('igbuttonclick', function (e) { grid.igGrid("saveChanges", function saveSuccess() { // loadingIndicator.hide(); }); //loadingIndicator.show(); //$("#undo").igButton("disable"); $(this).igButton("disable"); return false; } ); </script>
Version:
Thanks in advance,
Pete
Hello Pete,
After investigating this further, I determined that the methods bound to the dataBinding and dataBound events are not called initially, because “var grid” and the methods are defined after the data is bound. The events could be bound to methods as follows:
$(document).on("iggriddatabinding", "#grid", function (evt, ui) {
alert("binding")
});
Or
HomeController.cs
gridModel.AddClientEvent("dataBound", "dataBound");
Index.cshtml
function dataBound(evt, ui) {
alert('bound');
}
I have prepared a sample using Grid Model with enabled Updating, the “Save Changes”, “Undo” and “Redo” buttons are enabled and disabled correctly and by pressing “Save Changes”, “commit” method is called and the data is bound to the Grid.
Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
igGridUpdatingModel.zip
With the sample you provided I was able to determine that our project was referencing a newer version of the .js files (21.2), updated via NuGet; however, the MVC.dll was 2021.1, and once I referenced the correct javascript the binding worked as expected.