Kendo grid column extends out of screen

[DENIS]

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!

[DENIS]

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.

[Stefan]

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