Hello Edward,

Thank you for posting in the community.

What I can suggest is handling renederd event of igGrid to ensure that it is fully rendered. This event is fired after the whole grid widget has been rendered(including headers, footers, etc.). Please keep in mind that this event is going to be fired only when the grid is initialized and it wont be fired when it is rebound to data.

In order to achieve your requirement regarding progress bar to track the grid completion what I can suggest is creating a scrollbar (for example jQeury prograssbar widget). The status of this progressbar could updated when grid events are firing. For example, on dataBinding, dataBinded, footerRendered, headerRendered, dataRendered and rendered. Some further reference about igGrid events could be found at:

http://help.infragistics.com/jQuery/2014.2/ui.iggrid#events

In every handler the status could be changed using the value property of the progress bar. For example:

$(function () {
   $("#progressbar").progressbar({value:0, width: '425px'});
   $('#table1').igGrid({
    rowVirtualization: true,
    virtualizationMode: "fixed",
    autoGenerateColumns: false,
    width: '425px',
    height: '500px',
    dataBinding: function(evt, ui) {updateProgressBar();},
    dataBound: function(evt, ui) {updateProgressBar();},
    dataRendered: function(evt, ui) {updateProgressBar();},
    dataRendering: function(evt, ui) {updateProgressBar();},
    footerRendered: function(evt, ui) {updateProgressBar();},
    footerRendering: function(evt, ui) {updateProgressBar();},
    headerRendered: function(evt, ui) {updateProgressBar();},
    headerRendering: function(evt, ui) {updateProgressBar();},
    rendered: function(evt, ui) {updateProgressBar();},
    rendering: function(evt, ui) {updateProgressBar();},
    columns: [
     { headerText: "Birth Date", key: "BirthDate", dataType: "date" , width: "120px" },
     { headerText: "Product ID", key: "ProductID", dataType: "number" , width: "120px" },
     { headerText: "Units In Stock", key: "UnitsInStock", dataType: "string" , width: "120px" },
     { headerText: "Product Description", key: "ProductDescription", dataType: "string" , width: "120px" },
     { headerText: "Unit Price", key: "UnitPrice",dataType: "string" , width: "120px" },
     { headerText: "Seller", key: "Seller", dataType: "string" , width: "120px" },
     { headerText: "Office", key: "Office", dataType: "string" , width: "120px" },
     { headerText: "Country", key: "Country", dataType: "string" , width: "120px" },
     { headerText: "City", key: "City", dataType: "string" , width: "120px" },
     { headerText: "Address", key: "Address", dataType: "string" , width: "120px" }
    ],
    dataSource: namedDataMch,
    primaryKey: "ProductID"
   });
   $('head title').html($.ui.igGrid.version);
  });
  function updateProgressBar() {
   var oldVal = $("#progressbar").progressbar( "option", "value" );
   var newVal = oldVal + 10;
   $("#progressbar").progressbar( "option", "value", newVal );
  }

I made a small sample and I am attaching it for your reference. Please keep in mind that in my sample grid is loaded very fast and you could barely track the progress of the progressbar because it is loading very fast. If you put a breakpoint in the updateProgressBar function you will observe the increasing progress every time this event is fired.

I am currently investigatigating whether the same could be achieved for igDataChart and I will keep you posted on my progress.

Please let me know if you need any further assistance with this matter.