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

How put a horizontal ScrollBar

5 Answers 472 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Misahael
Top achievements
Rank 1
Misahael asked on 27 Feb 2014, 04:11 PM
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

5 Answers, 1 is accepted

Sort by
0
Misahael
Top achievements
Rank 1
answered on 27 Feb 2014, 04:15 PM
@(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
0
Dimo
Telerik team
answered on 28 Feb 2014, 08:34 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Misahael
Top achievements
Rank 1
answered on 28 Feb 2014, 01:25 PM
Hi Dimo,

Thanks for the help.

Regards
0
Klemen
Top achievements
Rank 1
answered on 02 Apr 2017, 06:58 PM

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.

0
Dimo
Telerik team
answered on 03 Apr 2017, 07:41 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Misahael
Top achievements
Rank 1
Answers by
Misahael
Top achievements
Rank 1
Dimo
Telerik team
Klemen
Top achievements
Rank 1
Share this question
or