responsive grid

[Fernando]

I am using the vue grid wrap with the bootstrap theme and I wonder how I can make my columns responsive or at least keep their size on a smaller screen and can scroll, for that set a width in my component for this reason not Does it work for example

<kendo-grid-column :field="'employee'" :width="160"></kendo-grid-column>

any ideas?

[Nikolay]

Hi Fernando,

The Responsive Columns functionality is available for the Wrapper Grid. The syntax is as shown below:

<kendo-grid-column :media="'(min-width: 150px)'"
                                 :field="'ProductID'"
                                 :title="'ID'"
                                 :width="200"></kendo-grid-column>

This could be observed live at the following demo:  https://stackblitz.com/edit/thw3jx-wpwiyt?file=index.html

Let me know if you have any questions.

Regards,

Nikolay
Progress Telerik

[Fernando]

the behavior of min-width is not what was expected, apparently, in my case I forgot to mention that I use: filterable-mode = "'row'" and when the buttons to add and remove filters appear, the column is uncomfortable, some observation or help ? here is the example: https://stackblitz.com/edit/thw3jx-wh2wd7?file=index.html

[Nikolay]

Hi, Fernando,

I would suggest setting minScreenWidth to the desired columns. This will make the column hidden if the screen size is less than the predefined pixel value:

<kendo-grid-column :min-screen-width="500"

This can be examined live in the following demo:

• https://stackblitz.com/edit/thw3jx-zalpi4

Let me know if this helps.

Regards,
Nikolay
Progress Telerik

[Fernando]

so is it not possible to have columns with a fixed width? and if the screen is smaller the scroll should help me to scroll, that's what I'm looking for

[Nikolay]

Hello Fernando,

This is the default Grid behavior. When the columns have predefined width (all columns must have width) upon resizing the container a horizontal scroller appears allowing the users to scroll to reach the columns that are no longer visible. This can be examined in the following demo:

• https://stackblitz.com/edit/thw3jx-wpwiyt

Let me know you have further questions.

Regards,
Nikolay
Progress Telerik