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. Image for the cookie policy date
close icon

Programmatically scroll to selected node with keyboard navigation

Hello,

We have a dynamically populated treeview with a scroll function sat inside a custom drop down.

We are currently using a custom function to ensure that a node is scrolled into view correctly (please see below code snippet). This is working when we toggle the drop down, however when we use the keyboard to tab into this control it scrolls to the top of the dropdown. By reusing the below code we are able to achieve a scroll down to the appropriate node, however it causes a jump or flicker affect.

How can we achieve keyboard navigation with focus on the correct node without the jump or flicker?


function ejTreeViewEnsureNodeVisible(treeView, node, container, timeDelay) {
    node = treeView._getNodeByID(node);
    if (treeView._isTreeElement(node) && !treeView.isDisabled(node) && treeView.isVisible(node)) {
        var offset = 0;
        var parents = node.parents('.e-item');
        for (var j = 0, len = parents.length; j < len; j++) {
            treeView._expandNode($(parents[j]));
        }
        offset = node.offset();
        node.animate({ scrollTop: offset.top }, timeDelay, 'linear', function () {
            node.find("> div > a.e-text")[0].scrollIntoView(false);
            container.scrollLeft = 0;
        });
        return true;
    } else
        return false;
}

Kind Regards,

Emma

3 Replies

KR Karthik Ravichandran Syncfusion Team November 23, 2016 12:52 PM UTC

Hi Emma, 
 
Sorry for the inconvenience caused. 
 
We have analysed your query (“Flickering occurs in keyboard navigation”) with your provided code block. We are not able to reproduce the reported issue in our end.  Based on the reported case, we have prepared the “TreeView” sample inside the scrollable area. Prepared sample was working fine in our end. Can you please check with the sample in the following link?
https://jsplayground.syncfusion.com/e3gk5fjb
 
 
We suspect that the reported issue may occurs due to some other workarounds in your application. Can you please update the sample based on your application along with the replication procedure or more details to reproduce the issue in our end? This would helpful for us to serve you better. 
 
Please let us know if you have any queries. 
 
Regards, 
Karthik R 



EB Emma Beviss November 23, 2016 01:55 PM UTC

Hi Karthik,

Your sample does work, however not for our purposes. 
Although your sample does not flicker, you cannot navigate using the keyboard at all. If I set focus on the tree view and press the up and down buttons I expect to be able to move through the list to then later select the item.

We are using angular and boostrap to achieve our goal.
We have the following treeview:

<div id="ReportingPeriodTypeTreeViewData" ej-treeview e-template="#treeTemplate" class="dropdown-tree-view"
                                 e-fields-datasource="reportingPeriodTypeTreeViewModel" e-fields-id="id" e-fields-parentid="parentId"
                                 e-fields-expanded="isExpanded" e-nodeselect="handleReportingPeriodTypeSelection"
                                 e-nodeclick="handleAlreadySelectedReportingPeriodType" e-keypress="reportingPeriodTreeViewKeyPress"
                                 e-selectedindex="currentReportingPeriodTypeId"></div>

Within a custom drop down control. The internal key press within the grid itself e.g. once the focus has been set, does work. However the initial focus into the treeview causes a scroll and jump.
I will also take another look into the code and let you know if i find any other possible factors.

Thank you,

Emma


PR Piramanayagam Ramakrishnan Syncfusion Team November 24, 2016 01:00 PM UTC

  
Hi Emma, 
 
Thanks for your update. 
 
We have analyzed your query. We suspect that, the reported issue (“the initial focus into the treeview causes a scroll and jump”) occurred when we select any node at initial rendering and which is not in visible state. For this case, we need to set this node in visible state at initial rendering by using “ready” event. So that, scroll and jump does not occur when we focus tree view and navigate the next element using keyboard interaction. Please refer the below code example. 
 
[HTML] 
 
<div tapindex="0" id="ReportingPeriodTypeTreeViewData" ej-treeview e-template1="#treeTemplate" class="dropdown-tree-view" 
        e-fields-datasource="dataList" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" 
        e-fields-expanded="expanded" e-nodeselect="handleReportingPeriodTypeSelection" 
        e-nodeclick="handleAlreadySelectedReportingPeriodType" e-keypress="ensurevisible" 
        e-selectedindex="10" e-width="250px" e-height="250px" e-ready="onready"> 
</div> 
 
[Script] 
 
angular.module('treeCtrl', ['ejangular']) 
    .controller('treeviewCtrl', function ($scope) { 
        $scope.dataList = localData; 
        $scope.onready = function (args) { 
            //focus the selected node at initial time 
            ejTreeViewEnsureNodeVisible(this, "12", 400); 
        } 
        $scope.ensurevisible = function (args) { 
            ejTreeViewEnsureNodeVisible(this, args.id, 350); 
        } 
    }); 
 
 
 
For more details on the ready event, please refer to the help document link: https://help.syncfusion.com/api/js/ejtreeview#events:ready 
 
For your reference, we have prepared a sample based on this in the link: https://jsplayground.syncfusion.com/otg2kxbx 
 
In the above sample, we have selected one node at initial rendering and make it is in visible state by using ready event. If you focus the control using (“tap key”) and press the up or down arrow then next/previous element of last selected node will be highlighted without any jump. 
 
Are you expecting this? Or if you still face the same issue, please provide video to reproduce the reported issue at your end. This would be helpful for us to identify the issue and provide a solution at the earliest. 
 
Regards, 
Piramanayagam R 


Loader.
Up arrow icon