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"></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() {
$("#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)