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

[Daochuen]

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

[Preslav]

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