Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1470
igGrid: updating and grid.on binding not working when using GridModel?
posted

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:

  • Infragistics\2021.1\Ignite UI for MVC\MVC5\Bin\Infragistics.Web.Mvc.dll
  • 5.21.1.17

Thanks in advance,

Pete

Parents
  • 1300
    Verified Answer
    Offline posted

    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

Reply Children