Fixed width columns with scroll

5 posts, 1 answers
  1. Steve
    Steve avatar
    21 posts
    Member since:
    Feb 2015

    Posted 16 Jan 2018 Link to this post

    Hi,

    I would like to set the widths of my columns and display a horizontal scrollbar since width exceeds container. When I try my code the columns get compressed with no horizontal scrollbar. If I resize a column, the scrollbar does appear. Is there a way to honor the fixed widths and have a horizontal scrollbar appear below instead of shrinking the widths?

        @(Html.Kendo()
          .Grid(Model.MyData)
          .Name("myData")
          .Columns(column =>
          {
              column.Bound(s => s.Col1).Width(60);
              column.Bound(s => s.Col2).Width(80).Title("Col2");
              column.Bound(s => s.Col3).Width(30).ClientTemplate("<span>#= Col3 != null ? Col3 : '' #</span>");
              ... several others
              column.Bound(s => s.ColX).Width(100).ClientTemplate("<span>#= ColX != null ? ColX : '' #</span>");
          })
          .ColumnMenu()
          .Scrollable(s => s.Enabled(true).Height("auto"))
          .Pageable(builder => builder.PageSizes(new List<object> { 20, 50, "all" }))
          .Filterable()
          .Sortable()
          .Groupable()
          .Resizable(resize => resize.Columns(true))
          .DataSource(datasource => datasource
              .Ajax()
              .PageSize(20)
              .Read(read => read.Action("MyReadAction", "MyController")
              )
          ))

  2. Richard
    Richard avatar
    149 posts
    Member since:
    Feb 2012

    Posted 16 Jan 2018 Link to this post

    My experience is that the shrinking happens when all columns have a specified width.  Leave off width() on at least one column and horizontal scrolling works.

     

     

     

  3. Steve
    Steve avatar
    21 posts
    Member since:
    Feb 2015

    Posted 17 Jan 2018 in reply to Richard Link to this post

    Thanks, that is not working for me. I removed .Width(x) from 1 column and then several with no change. When I take all the Widths off, I see all 20 columns and headers jammed together.

    I am seeing the scrollbar is I use .HtmlAttributes(new { style = "width: 80px;" }) on the columns, but then the headers don't align. I suppose I could also add HeaderHtmlAttributes, but that seems pretty painful.

    Is there no way to just list my columns and have the columns show my content via autosizing or honoring the Width(xx) setting with a horizontal scrollbar?

  4. Answer
    Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 18 Jan 2018 Link to this post

    Hello, Steve,

    I can suggest checking the different scenarios and specifics when setting the Grid column widths described in the following article:

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

    Please ensure that the Grid width is explicitly set and the sum of the column widths is exceeding it.

    If the issue still occurs please provide an example, as the issue can be caused by additional styles which are affecting the Grid behavior.

    Regards,
    Stefan
    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.
  5. Steve
    Steve avatar
    21 posts
    Member since:
    Feb 2015

    Posted 18 Jan 2018 in reply to Stefan Link to this post

    Thanks Stefan. I was unable to find that link - very useful. Oddly my grid is now working as I expect. I added explicit .Width() to all columns and left the Scrollable enabled. I'm sure I had that before and not working, but it is now showing the scrollbar right out of the gate so probably my mistake.

    Another oddity - if I take the width off one column, it does not display, but on inspection it is in the rendered HTML with a width of -12px (negative).

Back to Top