How put a horizontal ScrollBar

[Misahael]

Hi,

I wondering if it's possible to put a horizontal scroll bar because when I retrieve the information, columns has an overflow of the screen
I attach an image that shows the problem

[Misahael]

@(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                columns.Bound(column.ColumnName);
            }
        })
        .Filterable()
                       .Sortable()
                       .Pageable(m => m.PageSizes(new int[] { 10, 20, 50, 100 }))
                       .Groupable()
        .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {
                        foreach (System.Data.DataColumn column in Model.Columns)
                        {
                            model.Field(column.ColumnName, column.DataType);
                        }
                    })
                    .Read(read => read.Action("LeerExt_StockElementos", "Consultas").Data("getParameter"))
                )

    )

I post my code

Thanks for the help

[Dimo]

Hi Christian,

The problem occurs when a non-scrollable Grid with too many columns is used, and the columns cannot fit. Please refer to our documentation for more information and suggested options.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#column-widths

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#width

Regards,
Dimo
Telerik

 

 

[Misahael]

Hi Dimo,

Thanks for the help.

Regards

[Klemen]

I know that this is an old thread, but this was the second result on google search when trying to find the horizontal scroll solution. I have a lot of grids which look perfectly fine on desktops and tablets, but when you look at them on a mobile phone they go over the right edge like on Misahael's picture.

 

Anyway, this was my general solution:

.k-grid {
    overflow-x: auto;
}

 

It would be even better to somehow pin the right-most column (with buttons), but for now/me this will do.

[Dimo]

Hi Klemen,

Indeed, making the Grid <div> scrollable is a possible option. Alternatively, any Grid ancestor can be made scrollable too.

Regards,
Dimo
Telerik by Progress