How to configured scroll bar only horizontally for Kendo UI treelist ?

2 posts, 1 answers
  1. Daochuen
    Daochuen avatar
    33 posts
    Member since:
    Sep 2017

    Posted 24 Jul 2018 Link to this post


    We used treelist which inside scrollable div  in our MVC project.  If we configured scrollable= false for treelist all column's width will mess up. If we used default setting (which is scrollable=true) the double scroll bar appeared which is not allowed in project. How to configured scroll bar only horizontally or vertically for Kendo UI treelist ?


  2. Answer
    Preslav avatar
    511 posts

    Posted 26 Jul 2018 Link to this post

    Hello Daochuen,

    To achieve the desired behavior, I would suggest leaving the ".Scrollable(true)" configuration and removing the "y" scroll with CSS. For example:

            height: 600px;
            overflow-y: scroll;
        #myTreeListScrollableDiv .k-auto-scrollable{
            overflow-y: unset;
    <div id="myTreeListScrollableDiv">
        .Columns(columns =>
            columns.Add().Field(e => e.FirstName).Width(280);
            columns.Add().Field(e => e.LastName).Width(460);
            columns.Add().Field(e => e.Position).Width(160);
            columns.Add().Field(e => e.Phone).Width(400);
            columns.Add().Field(e => e.Extension).Width(440);
            columns.Add().Field(e => e.Address).Width(460);
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("All", "EmployeeDirectory"))
            .Model(m =>
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);

    I hope this helps.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top