How put a horizontal ScrollBar

6 posts, 0 answers
  1. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 27 Feb 2014 Link to this post

    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
  2.
  3. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 27 Feb 2014 in reply to Misahael Link to this post

    @(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
  5. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 28 Feb 2014 Link to this post

    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!
     
  7. Misahael
    Misahael avatar
    25 posts
    Member since:
    Oct 2013

    Posted 28 Feb 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for the help.

    Regards
  8.
  9. Klemen
    Klemen avatar
    1 posts
    Member since:
    Aug 2016

    Posted 02 Apr 2017 Link to this post

    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.

  11. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 03 Apr 2017 Link to this post

    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.
Back to Top