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
255
I want to know the finish time or event when the igchart and iggrid is drawn.
posted

My program draw mulitple charts and grids.
So, it takes many time to finish them.
Now I try to show the finish time through the progress bar.
But I can't do that..
Because I don't know the exact time or event  when the igchart and iggrid is drawn.

1.
Let me know the finish time or event when the igchart and iggrid is drawn respectively. 


2.
Is there a waiting bar function until the igchart and iggrid is drawn ?
Waiting bar is like this site (https://www.google.co.kr/search?q=waiting+bar&newwindow=1&biw=1024&bih=683&tbm=isch&imgil=wwjq_2HhnH3VaM%253A%253B6RYw4xzzuql-rM%253Bhttp%25253A%25252F%25252Fwww.telerik.com%25252Fforums%25252Fprogress-display-issue&source=iu&pf=m&fir=wwjq_2HhnH3VaM%253A%252C6RYw4xzzuql-rM%252C_&usg=__zrH3NLfeHyyJEblNZZJtki7LhGg%3D&ved=0CCsQyjc&ei=nBbQVK6RDqa7mAWIlYCoDA#imgdii=_&imgrc=wwjq_2HhnH3VaM%253A%3B6RYw4xzzuql-rM%3Bhttp%253A%252F%252Fwww.telerik.com%252Fclientsfiles%252F222977_waiting-bar.jpg%253Fsfvrsn%253D0%3Bhttp%253A%252F%252Fwww.telerik.com%252Fforums%252Fprogress-display-issue%3B458%3B116)



 

Parents
  • 17590
    Offline posted

    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.

    igGridProgressbar.zip
Reply Children