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.
Unfortunately, activation email could not send to your email. Please try again.

Programmatically scroll to selected node with keyboard navigation

Thread ID:

Created:

Updated:

Platform:

Replies:

127542 Nov 22,2016 04:44 AM Nov 24,2016 08:00 AM JavaScript 3
loading
Tags: ejTreeView
Emma Beviss
Asked On November 22, 2016 04:44 AM

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

Karthik Ravichandran [Syncfusion]
Replied On November 23, 2016 07:52 AM

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?
http://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 


Emma Beviss
Replied On November 23, 2016 08:55 AM

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

Piramanayagam Ramakrishnan [Syncfusion]
Replied On November 24, 2016 08:00 AM

  
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: http://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 


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.

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.

;