loadingIndicator: basic information, usage at rendering time

hello again,

we use big iggrids, bound to a local json datasource written into the html document before igloader is called => no delay because of network transmission.

iggrid needs time (up to 5 seconds) to be rendered. for a better usability we render a placeholder (with estimated size of the actual grid) and we show a spinner inside this placeholder. the placeholder gets removed when the iggrid rendered event is fired. 

I saw the built-in loadingIndicator and we want to use it instead of our spinner. Is this possible at rendering-time?

I could not call $(grid).data("igGrid")._loadingIndicator.show()  (_loadingIndicator undefined) during rendering/databinding. (_loadingIndicator is available when rendered is fired)

so please give me some basic information: what is the loadingIndicator used for? when is it available? how can I use it?

kind regards.

Hello Max, 

The grid has a built-in loading indicator which automatically shows whenever the grid is waiting for data. It should be visible whenever you perform things like sort/ filter, page, expand a row. I believe the best way to illustrate this is via our online Samples.Regarding your specific asking, you could refer to this one in particular:
http://www.igniteui.com/grid/basic-editing
 

I believe you may find the online sample useful, as iggriddatabinding and iggriddatabound events are handled to show and hide the modal indicator (it shows for a really small amount of time, as the binding is performed for less than a sec). Please note this is not the only case when the indicator is used in this sample, but when saveChanges is used too. 

The modal loading indicator specific functionality in this sample is referenced from another location: 

<!-- Used to add modal loading indicator for igGrid -->

    <script src="http://www.igniteui.com/js/grid-modal-loading-inicator.js&quot;></script>

function GridModalLoadingIndicator(grid) {

        var modalBackground = $("<div class='ui-widget-overlay ui-iggrid-blockarea' style='position: absolute; display: none; width: 100%; height: 100%;'></div>").appendTo(grid.igGrid("container"));

        function _show() {

               modalBackground.show();

               grid.data("igGrid")._loadingIndicator.show();

        }

        function _hide() {

               modalBackground.hide();

               grid.data("igGrid")._loadingIndicator.hide();

        }

        return {

               show: _show,

               hide: _hide

        }

}

 

The interesting code is:

     loadingIndicator = new GridModalLoadingIndicator(grid);

 

            grid.on("iggriddatabinding", function (e, args) {

                loadingIndicator.show();

            });

 

            grid.on("iggriddatabound", function (e, args) {

                loadingIndicator.hide();

            });

 

 

            $("#saveChanges").on('igbuttonclick',

                function (e) {

                    grid.igGrid("saveChanges", function saveSuccess() {

                        loadingIndicator.hide();

                    });

                    loadingIndicator.show();

                    $("#undo").igButton("disable");

                    $(this).igButton("disable");

                    return false;

                }

            );

 

Optionally, you could clear the indicator via the following:
$("#Grid1_container_loading").css("display", "none");

I hope this will help you implement a similar implementation for your specific case.

 

Regards,
Ivaylo Ganchev,
Developer Support Engineer,
Infragistics

thanks for your answer. I saw this example, but it does not work for us. we want to show a loading indicator during rendering of the grid (while no grid is visible because it is generated at this moment)

Hello Max, 

After further looking into this for you, I suggest a different approach.

What you could use the ui.igLoading widget. You could take a look into the code where it is defined in the “infragistics.ui.shared.js” file. You will find it under Infragistics default installation folder C:\Program Files (x86)\Infragistics\2014.1\Ignite UI\js\modules\infragistics.ui.shared.js  The widget has show and hide methods.

You could use this widget to display a loading indication whenever suited for your application, and not restricted to the grid loading indicator behavior and the igGrid.

I have implemented a simple code sample illustrating how it is possible to show the igLoading widget on page load and how to hide it when the grid is rendered handling dataRendered.  

$(function () {
$('#loading').igLoading();
});  

$("#grid").igGrid({
dataSource: data,
dataRendered: function(evt, ui) {
$('#loading').igLoading("hide");
}

hello,

thanks for your answer. calling igLoading() before rendering of iggrid starts does not work very well, because javascript engine is busy and gui gets not updated fast enough.

I render a placeholder div with the loading spinner gif as background now and delete it, when grid is rendered properly.

I am glad we found a working solution for your particular scenario!

Thank you for using Infragistics products!