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
  • 17590
    Offline posted in reply to Edward Jang

    Hello Edward,

    Thank you for your patience while I was looking into this matter for you.

    After discussing this with our developers they concluded that igDataChart is designed to load egregious amounts of data almost instantaneously. Having this in mind,  they mentioned that probably the time needed to load the JavaScript or to create a sufficient amount of data to make the chart spin will be longer than it takes to load the data into the chart.

    What they pointed is the refreshComplete event, however they stated that it will fire whenever the chart updates it`s state, which could be used to determine if it is done loading. You should keep in mind that this event fires also for some other circumstances as well. Basically it will fire often so it is not a good approach to make anything "expensive" in it.

    I hope you find this information helpful.

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

  • 255
    posted in reply to Vasya Kacheshmarova

    Hi.


    Thank you for your quick reply.

    I also know the refreshComplete event.

    I already tested it..

    But I can't know the finish time with the refreshComplete event..
    Because it shows several times in a datachart. (
    Sometimes twice, or  third times.)

    How can it know that the state is completed in the refreshComplete event?
    If I can, let me know that..

    Now.My solution is only addrow...But it's not good. 

     

Reply Children