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)
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.
Hi,
Thank you for your quick reply for iggrid..Yes, I need to know the event for igDatachart...I am worried that there is no finish event.But I need it....
Please check and let me know how to do that for igdatachart.
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.
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.
You cannot know that the state is completed in the refreshComplete event, because it doesn't provide that information.
What I can offer you is to put your progress update after your igDataChart initialization code.
Here is a pseudo code:
$("#dataChart")igDataChart({....});
updateProgressBar();
Note that the time updateProgressBar function executes the igDataChart should be rendered on the page.
Hope this helps,Martin PavlovInfragistics, Inc.
Hi Martin,
You say you can't know the finish time..
Then how can the progressbar() know whether the chart is completed? I don't understand what you said.
Can you show me the complete code with updateProgressBar()?
I tried the test with "addrow" thorugh for ~ loop..
But it's not what I want...
Please feel free to contact us if you need any further assistance with this matter.
I'm saying that the igDataChart should be rendered after you initialize it.
I'm attaching my sample for your reference.
Best regards,
Martin Pavlov
Infragistics, Inc.