Set scrollbar to selected item

[Developer]

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]

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. 

https://help.syncfusion.com/api/js/ejtreegrid#methods:scrolloffset 

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]

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]

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: 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ESSENT~1-1487957537 

 

Regards, 

Mydeen S N