We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Set scrollbar to selected item

Thread ID:

Created:

Updated:

Platform:

Replies:

143682 Apr 1,2019 07:56 AM UTC Apr 11,2019 09:04 AM UTC jQuery 3
loading
Tags: ejTreeGrid
Developer
Asked On April 1, 2019 07:56 AM UTC

After inserting a new item to the treegrid, i select the item by code in the following event:
 actionComplete: (args) => {
          if (args.requestType === 'refreshDataSource') {
               ...
               args.model.selectedRowIndex = newRowIndex;
          }

Sometimes the new selected item is not in the visisble part of the treegrid.
Is there a possibility to scroll to the correct position to see the current selected item?

Greatings
Mike


Mydeen S N [Syncfusion]
Replied On April 3, 2019 05:52 AM UTC

Hi Mike, 

Greetings from Syncfusion support. 

Please find the response for the query in below. 

Query 1: After inserting a new item to the treegrid, i select the item by code in the following event:Sometimes the new selected item is not in the visisble part of the treegrid. 
 
Response : We noticed that the we can dynamically select a row using the setModel only . Please find the code snippet for selecting a row in below. 
 
Code Snippet: 
 
var treeObject = $("#treeGridContainer").data("ejTreeGrid"); 
treeObject.setModel({"selectedRowIndex" : 20 }) 
 
 
Query 2: Is there a possibility to scroll to the correct position to see the current selected item? 
 
Yes, it is possible to scroll to the position to view the current selected item. 
Use  ‘scrollOffset’ method to scroll to the correct position. please refer the below link. 

Code Snippet: 
 
var treeObject = $("#treeGridContainer").data("ejTreeGrid"); 

//treeObject.scrollOffset(0, (index of the record to view * treeObject.model.rowHeight));  
treeObject.scrollOffset(0, (20 * 15));  



When new item is added to the treegrid, it automatically scrolls to the correct position to view the added record while no row is selected in treegrid. However adding a row dynamically after select the row using setModel  will not scroll to added row, so  could you please share the code snippet of adding new record. So that we can proceed further. 

Regards, 
Mydeen S N 


Developer
Replied On April 9, 2019 11:50 AM UTC

Adding new items will be done by setting a new/changed datamodel:
 var treegridObj = $(this.parentContentId).data("ejTreeGrid");
 // To refresh TreeGrid with new datasource
 treegridObj.setModel({"dataSource" :data });

I have added a little sample with my problems with the scrollOffset method.
1) It would be nice if i set the selection to an item and the scrolling would be done automatically. (onlySelectRow button in the sample).
2) selectAndScroll button in the sample works for the rowIndex 12. For rows at the end of the treegrid(i think 28-36) scrolling doesn't work (e.g. change  "12" in sample by "30")
    I have to do a workaround by scroll to bottom and after that i can use the scrollOffset method
3) onlyScrollToBottom button doesn't work if allowPaging is set to true  in the treeGrid configuration(change "allowPaging: false," to "allowPaging: true," in the sample)
4) scrollOffset not correct if some nodes are collapsed => use the sample with rowIndex 12 => collapse the first node ("Planning") and push the selectAndScroll button => the correct row would be selected, but the scrolling was not correct (the selection is not in the visible part of the treegrid)
Is there a possibility to get the index of an item/row only of the visible rows => in this sample with rowIndex=12 and the "Planning" node is collapsed it would be rowIndex=8

For number 1 and 2 i have a workaround. Number 3 i doesn't need currently. But number 4 is currently my high priority problem.
Do you have a workaround/solution for my problem number 4?

Greetings
Mike

Attachment: EssentialStudioforJavaScript_TreeGrid_2f50f7b2.zip

Mydeen S N [Syncfusion]
Replied On April 11, 2019 09:04 AM UTC

Hi Mike, 

Please find the response below, 

Query1, Query 2, Query 4: This issue arises as the scroll bar was not properly updated after selecting the row dynamically. 

Solution:   You can resolve this issue by updating the scrollbar using ‘updateScrollBar’ method after selecting the row. In this method, the scroll bar gets updated based on the updated records. So that you can scroll to the correct position. 

Code Snippet: 
//.. 
treeObject.updateScrollBar();                    

Query 3: onlyScrollToBottom button doesn't work if allowPaging is set to true  in the treeGrid configuration(change "allowPaging: false," to "allowPaging: true," in the sample) 
 
Solution: 
When you use ‘scrollToBottom’ method, the scroller top is calculated based on the updated records length. The scroll bar’s top position will exceed the maximum value. You can resolve this by 
taking instance of the scroller element and passing scroll bar’s maximum top value to the scrollY method. 
 
Code Snippet: 
var treeObject = $("#TreeGridContainer").data("ejTreeGrid"); 
var scrollObj = treeObject.getScrollElement().data("ejScroller"); 
scrollObj.scrollY(scrollObj._vScrollbar.model.maximum, true);      

We have also prepared a sample for your reference. Please find the sample from below link: 
 
Regards, 
Mydeen S N 
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon