Ensure selected node is visible

[Joel]

I know understand how to set a node in the TreeList as selected on databound.  However, if this tree data is long how do I get the control to scroll to the selected node?

My Tree:

<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

@(Html.Kendo().TreeList<Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(225);
    })
    .HtmlAttributes(new { style = "height:550px;" })
    .Selectable(s => s.Mode(TreeListSelectionMode.Single))
    .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Read(read => read.Action("IndexJson", "Groups").Data("treeGetData"))
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId);
            m.Expanded(true);
            m.Field(f => f.Name);
        })
        .Sort(s => s.Add(f => f.Name)))
    .Events(events =>
    {
        events.DataBound("onDataBound");
    })
)

 

JavaScript:

// show the matching groupId as selected in the treelist
function onDataBound(e) {
    // Handle the dataBound event.
    var treelist = e.sender;
    //alert(treelist == null);

    var initiallySelectedID = $("#groupId").val();
    alert(initiallySelectedID);

    var dataItem = treelist.dataSource.get(initiallySelectedID);
    //alert(dataItem == null);

    var row = $("tr[data-uid='" + dataItem.uid + "']");
    treelist.select(row);
}

 

[Peter Milchev]

Hello Joel,

As you have the row element, you can get the HTML element for it and call the scrollIntoView() method:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

dataBound:function(ev){
                    var treelist = ev.sender;
                    var $row = $("#treelist tr").last()
                    treelist.select($row);
                    $row[0].scrollIntoView();

                  }

Regards,
Peter Milchev
Progress Telerik