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/
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.
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
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.
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.
Hi,
I would like to have 'isnullorempty' filter for text field on Data Grid. There are 'isnull' and 'isempty' filters but it is not straightforward for non-engineer guys. If we have 'isnullorempty' filter, I think it is very useful.
Other option, is there any way to customize filter operator by myself so that we can have any filter operation?
Thank you,
Tatsuro Matsumoto.
We are using Kendoreact Data Grid with server side paging, sorting and filtering.
Due to server side nature of those operations DataGrid re-renders bringing the scrollbar position to 0,0 position.
Any div scrollbar position can be saved :
const scrollEvent = (event) => { sessionStorage.setItem("facets_scrollY",event.target.scrollTop); }
and restored using reference an scrollTop/scrollLeft properties.
ref.current.scrollTop = <value to set>
ref.current.scrollLeft = <value to set>
Please provide this standard feature to be available on Kendo Data grid as well.
Thank you
Hello,
Seems the link to the GridColumnMenu accessibility page from the DataGrid accessibility page is broken.
Our tools are also warning us about empty links, caused by the GridColumnMenu button. How would we solve these?
Thank you,
Kristiyan Dimitrov
The issue can be seen on your demo at https://www.telerik.com/kendo-react-ui/components/grid/
Steps:
1) Load the demo from https://www.telerik.com/kendo-react-ui/components/grid/
2) Click on (x) in customerID grouping
3) Look at the console and see the line with exception:
The problem is that `e.originalEvent.target` is an svg object and it's className property is an object, not a string. The object is `SVGAnimatedString {baseVal: '', animVal: ''}` and it doesn't have the method indexOf.
Please fix asap.
I have one column that contains mix of boolean and string values. When I attempt to apply a filter function to that column, it generates an error for the boolean value true because indexOf cannot be performed on a boolean. When I have other formats along with strings and I use filter="text", I would like the value to be converted to string in the filter function rather than modifying the data on my end before calling the filter function, because that would actually be incorrect data.
Example
https://www.telerik.com/kendo-react-ui/components/grid/filtering/
If I change
<Column field="Discontinued" width="190px" filter="boolean" />
to
<Column field="Discontinued" width="190px" />
and then search for anything in that filter it throws error.
Maybe if you make the `filter="text"` always convert the all the values to string values that would help resolve the error