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

Kendo grid column extends out of screen

2 Answers 354 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DENIS
Top achievements
Rank 1
DENIS asked on 07 Dec 2017, 10:24 AM

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 Answers, 1 is accepted

Sort by
0
DENIS
Top achievements
Rank 1
answered on 08 Dec 2017, 01:02 PM

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.

0
Stefan
Telerik team
answered on 11 Dec 2017, 07:13 AM
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.
Tags
Grid
Asked by
DENIS
Top achievements
Rank 1
Answers by
DENIS
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or