Currently the GridColumn Component only supports width property.  It should also support minWidth and maxWidth properties for better responsive design.  https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/

Hello, 
I am looking to start using the Kendo React grid control, but I need the grid to be responsive to support viewing on a phone. I noticed that your Angular grid has this functionality, but it is missing from your React grid. 
I would like to have rows turn into individual cards when viewed on a phone. The closest thing I see in the react documentation involves hiding columns, which is undesirable.  Is there a way to add this behavior to the React grid?  If not, when will that be implemented?  
Thank you, 
Alex

Currently (as visible in grid demos), touch drag scroll in mobile (responsive) mode is not working when rows selection is enabled.

There is no known workaround since the complexity of implementing custom row renderer with all the intricacies of the grid's behaviour would be a huge task.

The client's facing issue is that when using a KendoReact grid on mobile device, they can't easily scroll the grid rows data by touch drag scrolling the rows.

Hi,

I know pageSizes options takes a Boolean or Array of Numbers, but Is there a way add an option to pagination dropdown which lists all rows of the grid like, 'All' option?

Can we set the options of the dropdown to like '10, 50, All', where option 'All' lists all rows of the grid?

Add the ability to apply table breakpoints to the Grid for responsive behavior.

Similar to the Bootstrap tables:

https://getbootstrap.com/docs/4.4/content/tables/#breakpoint-specific

It is important for my users to be able to invoke the GridColumnMenuFilter  directly from the grid header. ie. The jQuery version has the filter icon beside the header text  (Rather than having to click a menu and then click "Filter" - which is necessary if all I want is a filter.

I know this is possible with some CSS.  But it is important that there is a visual indicator that the filter is on (which the jQuery version supports but doesn't seem currently possible with the React version)

Thanks

We use data grids with virtual scrolling for inline editing a large number of records. However, when we want to add a new row to the grid it automatically resets the scroll position and doesn't even fire onPageChange event so the records you see do not correspond to the scroll position.

Check the following example (scroll to bottom, click anywhere on the table - this will add a new row - and observe the described problem):

https://stackblitz.com/edit/react-52zzvz?file=app%2Fapp.tsx%3AL78

To demonstrate:

1. Open your simplest interactivity/selection demo, which is not grouped, in StackBlitz. See: https://www.telerik.com/kendo-react-ui/components/grid/interactivity/selection/

2. Add the Grid's group prop. To demonstrate the bug nothing else needs changed

<Grid group={[]} ...

3. Run demo, scroll down and pick a row.

4. Observe the grid scrolls to the top and you cannot see your selected row unless you scroll back.

In our project we control column widths manually as we have complex logic on how wide each column should be, based on a number of external criteria. However, those widths are not fixed and might change during the lifetime of the data grid.

This was not causing any problems up to version 5.11.0 but after we upgraded the Kendo packages this controlled behavior of the column widths broke:

kendo-react-grid v5.11.0 example (working):
https://codesandbox.io/s/crazy-bird-ss7mgl?file=/app/main.tsx

kendo-react-grid latest example (broken):
https://codesandbox.io/s/dazzling-antonelli-wxsflj?file=/app/main.tsx

If we inspect the elements of the data grid, we can see that there is an inline style attribute on the header and body tables, setting the total width of those <table> elements to the sum of its columns. However, that value is not updating after the initial mount as it was prior to v5.12.0 which effectively makes the column widths uncontrollable.

It would be great if there was the ability to lock the expand/collapse column that is rendered for master/detail grids.

Hello,

I was doing some research to see if you had a footer that would be for the entire grid instead of for each column. In this research I found an article that would place the GridToolbar as a footer by changing the order to a value of 1 on the .k-toolbar css style.

.k-toolbar {
  order: 1;
  border-top-style: inset;
  border-top-width: 1px;
}

I was wondering if you could create a feature request to add a property to the GridToolbar that would allow placing it as a footer? Or maybe a feature request that would allow for a footer for the entire grid?

I'm working on creating a footer that would allow my users to open the filter builder in a modal and then display the selected filter in text so they are aware of the current filtering of the grid. This would also be a nice feature to be included with the Grid. Included below is an example of the GridToolbar as the footer.

Similar to how you can specify a column for the selection, it'd be nice if you could specify a column for the expand / collapse column so that you can provide a header value and handle a header value click change event.

The idea being that I could mass expand or collapse master detail rows similar to how I can mass select rows.

The GridHelper is defined in a separate file, and this is the way we can use it - https://www.telerik.com/kendo-react-ui/components/grid/getting-started/gridhelper/

However, I prefer if it is exported from the Grid package, and is maintained from there.

I think this would be a great feature to have out-of-the-box, and hopefully it's something easy to add from your end. UX-wise, it's really difficult to wrap your head around a non-alphabetized list, especially when the list is used for the special purpose of filtering -- you now have to filter down the list before you can filter the grid itself, which adds more overhead for the user.

I understand that Excel is not the end-all and be-all, but Excel also sorts it by default:

Full discussion can be found here - https://www.telerik.com/forums/how-to-make-gridcolumnmenucheckboxfilter-be-alphabetical-order