1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Vertical scrollbar

Vertical scrollbar

Hi,
is there a way to get and set the position of the vertical scrollbar of the treegrid with javascript code? Or to scroll to the selected row?
I can select a specified row with this javascipt code:
var treegridObj = $('#treeGrid').data('ejTreeGrid');
treegridObj.model.flatRecords[i].isSelected = foundNode[0].isSelected;
treegridObj.refreshRow(i);
treegridObj.refreshContent();
treegridObj.renderRecords();
The row is selected but the vertical scrollbar position does not change.
Thank you.

3 Replies
DK Dinesh Kumar Nagarathinam Syncfusion Team October 20, 2015 01:15 PM UTC

Hi Cosimo,

Thanks for using Syncfusion Products.

We can scroll the vertical scroll bar automatically according to the selected row by using “updateScrollBar” public method in treegrid.

Code Snippet:

<body>

///...

<ej:treegrid ID="Treegrid" runat="server"  AllowColumnResize="true"

RowSelected="rowSelected">

</ej:treegrid>

///...

<script type="text/javascript">


        function rowSelected(args) {


            var obj = $("#Treegrid").data("ejTreeGrid");


            obj.updateScrollBar(args.recordIndex);

         
        }

</script>

</body>


We have prepared a sample based on your requirement, please find the sample from below location,

Sample: http://www.syncfusion.com/downloads/support/forum/120823/ze/TreeGridSample1985721505
 
Please let us know, if you need further assistance based on this.

 
Regards,
Dinesh kumar.N

CC Cosimo Carbonelli October 26, 2015 02:28 PM UTC

Hi,
thank you for your answer. I tried your code but it did not work for me. I have a treegrid with a checkbox column built with the following template:
<script type='text/x-jsrender' id='checkColumnTemplate'> <input type='checkbox' class='rowCheckbox' id='chk' onclick='checkUnCheck(this, {{:#data['nodeID']}});' {{if #data['visible']=='1'}} CHECKED>{{/if}}</script>

Here is the javascript code I use:
function checkUnCheck(ctrl, curNodeId) {
    var treegridObj = $('#treeGrid').data('ejTreeGrid');
    PIKR.WServices.Tree.SetTreeVisibility(curNodeId, ctrl.checked, rootNodeId, true, function (res) {
        if (res != null) {
            var flatRecords = treegridObj.model.flatRecords;
            $('#treeGrid').ejTreeGrid(
                                   {
                                       dataSource: JSON.parse(res)
                                   });
            expandGrid(flatRecords, curNodeId);
        }
    });
}

function expandGrid(flatRecords, curNodeId) {
    var selectedIndex = -1;
    var treegridObj = $('#treeGrid').data('ejTreeGrid');
    for (var i = 0; i < treegridObj.model.flatRecords.length; i++) {
        var nodeId = treegridObj.model.flatRecords[i].nodeID;
        var foundNode = $.grep(flatRecords, function (e) { return e.nodeID == nodeId; })
        if (foundNode.length >= 1) {
            if (treegridObj.model.flatRecords[i].hasChildRecords)
                treegridObj.model.flatRecords[i].expanded = foundNode[0].expanded;
            if (foundNode[0].isSelected)
                treegridObj.model.flatRecords[i].isSelected = foundNode[0].isSelected;
            treegridObj.refreshRow(i);
        }
       // treegridObj.updateExpandStatus(treegridObj.model.flatRecords[i], true);
    }
    treegridObj.refreshContent();
    treegridObj.renderRecords();
}

function treeGrid_RowSelected(args) {
    var obj = $("#treeGrid").data("ejTreeGrid");
    obj.updateScrollBar(args.recordIndex);
}


The row is selected and the function  treeGrid_RowSelected is executed but the scroll is at the beginning of the grid. Can you help me?
Best regards.


DK Dinesh Kumar Nagarathinam Syncfusion Team October 27, 2015 01:16 PM UTC

Hi Cosimo,

We have analyzed your query with our sample , we were not able to reproduce the issue , can you please check whether the row index argument (args.recordIndex) in the ‘rowSelected’ event is generated properly for the corresponding row also can you share us your sample this will be helpful for us to provide you a better solution.

Regards,
Dinesh kumar.N

Loader.
Up arrow icon