Kendo grid column extends out of screen

3 posts, 0 answers
  1. DENIS
    DENIS  avatar
    7 posts
    Member since:
    Nov 2010

    Posted 07 Dec 2017 Link to this post

    Hello everybody. 

    As you can see here current grid I've made goes out of the screen only I apply "Filterable" property to it and only then. I need column filtering but without the grid extending out of my screen. 

    Here's the current code

    @(Html.Kendo().Grid<POSLogGridData>()
       .Name("grid")
       .Columns(columns =>
       {
              columns.Bound(c => c.ID);
              columns.Bound(c => c.ErrorLevel);
              columns.Bound(c => c.Time);
              columns.Bound(c => c.Location);
              columns.Bound(c => c.Data);
     
        })
        .Filterable(filterable => filterable
               .Extra(false)
               .Operators(operators => operators
                         .ForString(str => str.Clear()
                         .StartsWith("Starts with")
                         .IsEqualTo("Is equal to")
                         .IsNotEqualTo("Is not equal to")))
                 )
        .Pageable(pager => pager.Refresh(false))
        .Sortable(sortable => sortable.Enabled(true)).AutoBind(false)
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
        .AllowCopy(true)
        .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Batch(false).PageSize(100)
        .Model(model =>{
                  model.Field(gridMainAlias => gridMainAlias.ID).Editable(false);
                  model.Field(gridMainAlias => gridMainAlias.ErrorLevel).Editable(false);
                  model.Field(gridMainAlias => gridMainAlias.Time).Editable(false);
                  model.Field(gridMainAlias => gridMainAlias.Location).Editable(false);
                  model.Field(gridMainAlias => gridMainAlias.Data).Editable(false);
                  })).Resizable(resize => resize.Columns(true))
         )

     

    Thanks for help in advance!

  2. DENIS
    DENIS  avatar
    7 posts
    Member since:
    Nov 2010

    Posted 08 Dec 2017 in reply to DENIS Link to this post

    Okay so after hours of work, I figured out its not a problem with Filtering, but the problem is horizontal scrolling.

    .Scrollable(a => a.Height("auto"))

     

    I had to add this line of code to fix the issue. Think that's a Grid bug to be honest as it should be like that by default.

  3. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 11 Dec 2017 Link to this post

    Hello, Denis,

    Thank you for providing the code.

    I'm glad to hear that the issue is resolved.

    In general, the shown issue should not occur when the Grid is made filterable, as the filtering should not affect the column widths. Also, setting ".Scrollable(a => a.Height("auto"))" should affect the height of the Grid only.

    This type of issue could occur if there is a CSS rule set to the Grid container which is modifying its width.

    If this issue occurs, with no custom CSS, please provide an example, so we can inspect it and log an issue in our GitHub repository based on that.

    Also, I can suggest checking the following article for the Grid widths:

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

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