This is a migrated thread and some comments may be shown as answers.

Ensure selected node is visible

1 Answer 15 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 22 Apr 2020, 02:48 AM

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);
}

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 24 Apr 2020, 12:20 PM

Hello Joel,

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

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

                  }

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Peter Milchev
Telerik team
Share this question
or