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

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

    Posted 24 Jul 2018 Link to this post

    Hello,

    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 ?

    Thanks

  2. Answer
    Preslav
    Admin
    Preslav avatar
    503 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:

    <style>
        #myTreeListScrollableDiv{
            height: 600px;
            overflow-y: scroll;
        }
     
        #myTreeListScrollableDiv .k-auto-scrollable{
            overflow-y: unset;
        }
    </style>
     
    <div id="myTreeListScrollableDiv">
        @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .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);
        })
        .Filterable()
        .Scrollable(true)
        .Sortable()
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("All", "EmployeeDirectory"))
            .ServerOperation(false)
            .Model(m =>
            {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo);
                m.Expanded(true);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
            })
        )
        )
    </div>

    I hope this helps.


    Regards,
    Preslav
    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