Forums Home / Wijmo / General Discussion
Posted by: reply2manojvadde on 11 March 2018, 3:08 pm EST
reply2manojvadde
Posted 11 March 2018, 3:08 pm EST
I am trying to use the virtualization demo as link below :
http://demos.wijmo.com/5/Angular/VirtualData/VirtualData
Whenever I tried to scroll the table and fetch the new number of rows or datasets, the scroll is defaulted to zero position.
Anyone can see the issue by scrolling to top or bottom about 10% or higher.
abhishek.dutta
Posted 11 March 2018, 7:51 pm EST
Hi,
Similar problem is discussed in this thread
https://www.grapecity.com/en/forums/wijmo/virtual-grid-scrollbar-pro
Regards
reply2manojvadde
Posted 12 March 2018, 3:33 pm EST
Hi,
The scroll bar needs to be consistent in my project requirement, the solution does not fit this.
Do you have any other way to achieve this?
Regards,
Manoj
abhishek.dutta
Posted 12 March 2018, 9:22 pm EST
YOou can save and restore scroll positions like in the following plunk:-
http://plnkr.co/edit/tRK0O52inNd7FMrczOB9?p=preview
Regards
reply2manojvadde
Posted 13 March 2018, 3:53 am EST
Hi Abhishek,
Thanks for the solution.I need to customize the query parameters according to my service and change the url pattern how can i acheive this.
The example shows the request url as below:
I want to call my user defined url with the different query parameters .
Regards,
Manoj
manish.gupta
Posted 14 March 2018, 5:49 pm EST
Hi Manoj,
We are sorry, if you would like to modify the header request and call your user defined url with different parameter, you should go with ServerCollectionView as follows sample:
http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/ServerCollectionView
You may also make an Ajax call and bind the result to the FlexGrid.
As your original question, you would like virtual scrolling, for this you need to fetch records from server and push them to sourceCollection array as given below sample:
http://jsfiddle.net/Wijmo5/hwr2ra1q/
For retaining scrollPosition, save scrollPostion before pushing record and set scroll position after completion of record addition. Please refer to the updated sample fiddle for the same:
http://jsfiddle.net/mkgupta911/hwr2ra1q/49/
Also, we have queried to the concerned team for further investigation on this with tracking id 305326. If you may elaborate the change in URL with example, this may be helpful to the team.
Thanks,
Manish Kumar Gupta
reply2manojvadde
Posted 18 March 2018, 8:10 pm EST
Hi Manish,
I would like to give more explanation on the question above.
There is a service URL named :
http://services.odata.org/V4/Northwind/Northwind.svc
How can i use my user defined URL for fetching data and give the itemsSource to the data-table?
Or the above service URL is the only one i can use for data virtualization concept implementaion.
Regards,
Manoj
abhishek.dutta
Posted 19 March 2018, 9:17 pm EST
Hi,
You can replace the given url with any service url of your choice as long as the service implements OData protocols.
More information on odata can be found as here:-http://www.odata.org/
hubert
Posted 20 March 2018, 2:56 am EST
Manojv,
The soultion Abishek demonstrated only partially resolves your problem. Just try to move the scrllbbar constantly while having network monitor opened. You will notice more than one requests for oData at once. In my opinion the previous but unfinished requests should be cancelled to prevent ‘loaded’ events for no longer needed/displayed data. That’s why you are still getting blinking scrollbar. See also my forum topic: https://www.grapecity.com/en/forums/wijmo/virtual-grid-scrollbar-pro
reply2manojvadde
Posted 21 March 2018, 10:52 pm EST
Hi,
Can we implement data virtualization for normal flex grid.
Please help me with an example.
Regards,
Manoj
abhishek.dutta
Posted 22 March 2018, 7:15 pm EST
Hi,
If you want to load data as user scrolls down,you can refer to following example:-
Regards
reply2manojvadde
Posted 26 March 2018, 10:27 pm EST
Hi Abhishek,
The data is not virtualised and more over the scroll bar is not consistent.
If you any other let us know.
Regards,
Manoj
abhishek.dutta
Posted 28 March 2018, 2:16 am EST
We are looking into it. We shall get back to you on this
bernardo-castilho
Posted 29 March 2018, 5:01 am EST
Hello everyone. Wow, long and interesting thread. Let me try to contribute a little.
The first issue discussed above actually breaks down into two:
FlexGrid scroll behavior. I believe this was a bug (IE-specific) which has been fixed in the latest build. So you don’t have to do anything about it other than get the latest version as soon as it is released (probably next week).
ODataVirtualCollectionView loading data too often. This one can be fixed in the sample, by debouncing the handling of the scrollPositionChanged event. We have applied this fix to our version of the sample (available soon for download). Here is the change (you can apply this directly to your version of the sample):
// appCtrl.js
// update data window when the grid scrolls
// use a debouncing timeout to avoid too many updates
var setWindowTimeout = null;
flex.scrollPositionChanged.addHandler(function () {
if (setWindowTimeout) {
clearTimeout(setWindowTimeout);
}
setWindowTimeout = setTimeout(function () {
var rng = flex.viewRange;
vcv.setWindow(rng.row, rng.row2);
}, 250); // debouncing timeout
});
The second issue is related to the ODataVirtualCollectionView canceling ‘abandoned’ requests made while the user scrolls the grid and requests a new data window. We have implemented this in the ODataCollectionView class that is part of the wijmo.odata module. It is a nice performance improvement and will be available in the next release as well. Many thanks for the excellent suggestion/request.
Finally, the is a question about “implementing data virtualization for normal flex grids”.
I hope the fiddle below answers this one. It implements a simple and general mechanism for loading data asynchronously and on demand:
http://jsfiddle.net/Wijmo5/bo7trkca/
The data is loaded ansynchronously as the user scrolls the grid. In this example, the data is generated in code. In real applications, it could be calculated or retrieved from a database.
I hope this information is useful.
Thanks again for the great feedback, it really helps us improve our products.
reply2manojvadde
Posted 2 April 2018, 10:50 pm EST
Dear Castilho,
The above perfectly suits the virtualization for normal flex.
I would like to bring one lacking feature of sorting in this example.
How can we achieve this.
Thanks,
Manoj
bernardo-castilho
Posted 3 April 2018, 12:24 am EST
Hello Manoj
Sorting is not supported in the fiddle example because the data does not exist at all until it is requested, so there’s no way to sort it.
If instead of generating the data from nothing, you were to retrieve it from a database, then you could apply the sorting to the database request (e.g. give me rows 1000 to 1040 from customers sorted by city).
The ODataVirtualCollectionView does support this. When the user applies a sort, it requests a fresh batch of sorted records for the current view (e.g.:
“http://services.odata.org/V4/Northwind/Northwind.svc/Order_Details_Extendeds?$format=json&$count=true&$orderby=ProductName desc&$skip=1842&$top=100”
If you have a custom data service, you could do a similar thing.
I hope this helps.
reply2manojvadde
Posted 5 April 2018, 5:08 am EST
Hello Castillho,
Thanks for the prompt support.
Regarding the fiddle example as shown below:
http://jsfiddle.net/Wijmo5/bo7trkca/
Can I have the above solution using Angular and Typescript,as I found it useful.
Thanks.
abhishek.dutta
Posted 8 April 2018, 6:41 pm EST
Here is an example of the same in Angular.
