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

Kendo Grid Responsive Columns

2 Answers 1510 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mix
Top achievements
Rank 1
Mix asked on 30 Oct 2019, 07:51 AM

Hi,

How to responsive columns kendo grid react view on mobile.

same : https://demos.telerik.com/kendo-ui/grid/responsive-columns

Thanks for any help.

2 Answers, 1 is accepted

Sort by
-2
Stefan
Telerik team
answered on 31 Oct 2019, 08:11 AM

Hello,

Currently, the KendoReact Grid column widths have to be controlled programmatically based on the available screen.

More details on the Grid columns widths and the different options can be found here:

https://www.telerik.com/kendo-react-ui/components/grid/columns/width/

If you prefer having the same property as in the Kendo Ui Grid, please let me knot and I will convert this to a feature request, where the community can vote for it.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Hiba
Top achievements
Rank 1
Iron
answered on 22 Nov 2023, 04:47 PM

does the new version of KendoReact still require kendo grid column widths to be controlled programmatically using available screen or does it have an automatic/props way of doing this?

Thanks,

Konstantin Dikov
Telerik team
commented on 23 Nov 2023, 07:44 AM

Hi Hiba, 

The help article is updated since the last post and it shows the available options for handling the columns width based on the exact requirement.

Using percentage values is the easiest way for achieving responsiveness for the columns when the Grid changes its width. 

We also have some custom solutions for setting min-width for the columns, so that even columns without explicit width can be displayed when a horizontal scrollbar appears:

            <style>
            .k-grid col{
                min-width: 100px;
            }

Tags
General Discussions
Asked by
Mix
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Hiba
Top achievements
Rank 1
Iron
Share this question
or