I have grid with 1000 items. On every small change to my models, like selection or expand, I am getting every table cells being re-mounted, instead of re-rendered (imagine how many of them is currently with 1000 rows). I have tried to use shouldComponentUpdate to optimize my rendering, but grid component just removes old cell and mounts new one, instead of rerender.
Set TabStrip items on multiple rows, instead of scrolling.
If there are many items, they should be shown on multiple row.
Currently the GridFilterCell OnChange returns a subset of a FilterDescriptor (A value an an Operator to run on the value), which allows a custom filter cell to create one filter rule (FilterDescriptor). However, the CompositeFilterDescriptor structure allows a lot more flexibility. `month == 'January' OR 'March' OR 'May'`. If the GridFilterCell could be passed a CompositeFilterDescriptor instead of the current subset, then a custom filter cell could be much more powerful.
In an orders grid for instance, with a status of Pending, Paid, Shipped, and Delivered a "Show/Hide Shipped" button would exclude or include the Shipped and Delivered orders when clicked. Or a list of checkboxes to choose the statuses you want to see (like the JQuery Grids support).
TL;DR: There is currently no way to re-implement multi-checkboxes or other complex filtering interfaces with the Kendo React Grid without re-implementing all of the filtering logic manually from scratch, as the Existing filter cells don't support this and a custom GridFilterCell can't be configured to return that logic in a single FilterDescriptor.
Hi
Please add SignalR support for grid and other controls similar to Kendo UI for jQuery.
Thank you
Hello,
I have a request that for some tables the user needs arrows to be able to scroll left and right horizontally through the grid content. Is there a functionality like this provided out of the box by Kendo Grid, can you please point me to the docs or provide an example? I have provided an image to reflect this.
Thank you,
Andrei
Hi,
we have a feature request as per description, value isn't changed when manually entering numbers in the field, it only changes when selecting a presented date. When manually entering date, value remains null so reset is actually changing null to null, not the entered value to null. Your colleague mentioned that the feature of exposing mask to be controlled would make it possible to clear the mask.
Please refer to this github issue for more detailed information, containing stackblitz example and gifs of an user case, as it was an ongoing discussion.
Please implement an option to properly reset partially entered dates.
https://github.com/telerik/kendo-react/issues/368
I would like to request a new Kendo React Grid column editing option so that users can navigate editable columns using the keyboard. This feature should be similar to "navigatable" option from Kendo jQuery grid example - https://demos.telerik.com/kendo-ui/grid/editing
Thanks.
Create the KendoReact Media Player component.
Similar to the Kendo UI for jQuery component:
https://demos.telerik.com/kendo-ui/mediaplayer/index
Add the ability to customize the Filter component elements.
For example:
1) Customize the fields' DropDownList.
2) Customize the Add expression button. It could be used to open a Dialog with a list of expressions.
Request:
- provide a boolean property "virtualScrolling" on component GridColumnMenuCheckboxFilter which allows rendering a large list of filter options without delay
Discussion:
- https://www.telerik.com/forums/gridcolumnmenucheckboxfilter-virtual-scrolling
Use case:
- there are a lot of options to filter already in memory
- the filter dropdown has to open quickly (it opens slowly now, because there are so many options)
- after opening, the user sees a huge list (i.e. a long scrollbar)
- so he starts making the list of options smaller using the search input
Here's a screenshot with 100 options.
Alternatives:
From a developer point of view I think a scrollable filter is the most convenient way to handle the problem.
An alternative would be to provide a handler whenever the user selects a combobox in the GridColumnMenuCheckboxFilter. Then we could cut the number of options after a threshold and an option / combobox labelled "show more". When this is clicked, the filter options are re-rendered, the lists gets longer - and the user will get annoyed and will making the list of options smaller using the search input.
An other alternative would be to have a possiblity to force the user right away to use the search box. Instead of showing the list of checkboxes a text would be shown: "1258 options. Please refine your search input." But this would be a more invasive option.
Provide built-in scrolling of the Chart.
It should work similar to the pannable but allows scrolling with the mouse wheel instead of zooming.
The required end result is similar to this:
https://stackblitz.com/edit/react-rgpxmk-nrntv1?file=app/main.jsx
Add render function/prop for the ColorPicker popup.
This will allow rendering custom elements inside the ColorPicker Popup.
Add virtualization to the TreeView component to handle large trees.
Each node should be possible to have open at all time.
Each node should have the possibility to be selectable with a checkbox.
Allow sorting per column by a field other than the displayed field on the column. This goes for group sorting as well, when grouped by a certain field, the groups can only be sorted by that field, when we actually need those groups sorted in an arbitrary order we have defined in another field on the data.
https://github.com/telerik/kendo-react/issues/633
The Angular ButtonGroup has a 'selection' property that is not present in the React ButtonGroup.
This functionality would be nice to have in React.
The following code snippet is the temporary fix that has been provided to me by support to mimic Angulars functionality in React.
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, ButtonGroup } from '@progress/kendo-react-buttons';
class ButtonGroupContainer extends React.Component {
state = {
selected: null
}
groupButtonClick = (e) => {
this.setState({
selected: e.target.id
})
}
isSelected = (index) => {
return index === parseInt(this.state.selected) ? true : false
};
render() {
return (
<div className="row">
<div className="col-xs-12 col-sm-6 example-col">
<ButtonGroup>
<Button togglable={true} id={1} selected={this.isSelected(1)} onClick={this.groupButtonClick}>
Bold
</Button>
<Button togglable={true} id={2} selected={this.isSelected(2)} onClick={this.groupButtonClick}>
Italic
</Button>
<Button togglable={true} id={3} selected={this.isSelected(3)} onClick={this.groupButtonClick}>
Underline
</Button>
</ButtonGroup >
</div>
</div>
)
}
}
ReactDOM.render(
<ButtonGroupContainer />,
document.querySelector('my-app')
);