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.
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.
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...
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.
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.