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
Hello,
when using the StrictMode we get an UncaughtError when using the PopupComponent. Fe. when using the Date/Time-Picker.
ERROR
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at checkForNestedUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27287:11)
at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25470:3)
at Object.enqueueSetState (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14067:7)
at Component.setState (webpack-internal:///./node_modules/react/cjs/react.development.js:355:16)
at PopupWithoutContext.componentDidUpdate (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:285:18)
at commitLayoutEffectOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23328:30)
at commitLayoutMountEffects_complete (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24683:9)
at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24669:7)
at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24651:11)
at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24607:3)
The above error occurred in the <PopupComponent> component:
at PopupWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:97:28)
at eval (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/Popup.js:38:67)
at div
at AsyncFocusBlur (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/AsyncFocusBlur.js:30:23)
at TimePickerWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-dateinputs/dist/es/timepicker/TimePicker.js:87:28)
at eval (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/withPropsContext.js:28:95)
at component
at Field (webpack-internal:///./node_modules/@progress/kendo-react-form/dist/es/Field.js:37:22)
...
Excel export a grid that is grouped and also set the state of whether the groups should be collapsed or not
Is it possible to set the state of whether the groups are collapsed or not by default once you open the excel file, or is that not an option?
Given the simple example:
const RatingContainer = () => {
const [ratingValue, setRatingValue] = useState(0);
const clearRating = () => {
setRatingValue(0);
}
const onRatingChange = (event) => {
setRatingValue(event.value);
}
return <div>
<Rating
value={ratingValue}
onChange={onRatingChange}
/>
<Button
onClick={clearRating}
>
Clear
</Button>
</div>
}
export default RatingContainer;
The Rating component behaves as expected when updating `ratingValue` through the Rating component. However, when I want to clear the rating value with the 'Clear' button to update the `ratingValue`, the number of stars displayed doesn't update reflect the value of `ratingValue`.
Here is a subsection of my package.json file.
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-drawing": "^1.17.5",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-react-animation": "^5.13.0",
"@progress/kendo-react-buttons": "^5.13.0",
"@progress/kendo-react-charts": "^5.13.0",
"@progress/kendo-react-common": "^5.13.0",
"@progress/kendo-react-data-tools": "^5.13.0",
"@progress/kendo-react-dateinputs": "^5.13.0",
"@progress/kendo-react-dialogs": "^5.13.0",
"@progress/kendo-react-dropdowns": "^5.13.0",
"@progress/kendo-react-editor": "^5.13.0",
"@progress/kendo-react-excel-export": "^5.13.0",
"@progress/kendo-react-form": "^5.13.0",
"@progress/kendo-react-grid": "^5.13.0",
"@progress/kendo-react-indicators": "^5.13.0",
"@progress/kendo-react-inputs": "^5.13.0",
"@progress/kendo-react-intl": "^5.13.0",
"@progress/kendo-react-labels": "^5.13.0",
"@progress/kendo-react-layout": "^5.13.0",
"@progress/kendo-react-listview": "^5.13.0",
"@progress/kendo-react-notification": "^5.13.0",
"@progress/kendo-react-pdf": "^5.13.0",
"@progress/kendo-react-progressbars": "^5.13.0",
"@progress/kendo-react-tooltip": "^5.13.0",
"@progress/kendo-react-treelist": "^5.13.0",
"@progress/kendo-react-treeview": "^5.13.0",
"@progress/kendo-react-upload": "^5.13.0",
"@progress/kendo-svg-icons": "1.4.2",
"@progress/kendo-theme-bootstrap": "^5.2.0",
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,
could you add remove / delete event to multiselect, like onRemove or something like that.
Now, because onChange event gives only the currently selected items, I need to do manual diffing what was the item that was removed.
If there were an event for remove / deletion of an item, it would be much easier to handle that.
Br, Miika
In the following example:
https://stackblitz.com/edit/react-l3bszd?file=app%2Fmain.tsx
We have 2 events associated with 2 different resource items (in this case people - Peter and Alex). If we have only 1 resource item defined (e.g. Peter) we also see Alex's event in Peter's calendar group (column) which is incorrect.
However, as long as we have more than 1 resource item provided, grouping is done correctly (commented lines 21-23):
My suspicion is that grouping was never tested with only 1 resource item, as it doesn't make much sense to group in that case. However, those groups also act as filters for events that do not have associated resource. We let our users to dynamically multi-select from a list of all available resource items so that they will see their events grouped only for the specified resource items. And if they select only 1 resource item from that list, they will see all events (for other resource items as well) incorrectly.
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 have attached the file there is a pie chart the labels are outside the pie chart, so I need the labels inside the pie chart ,
also in the bullet chart, I am unable to rid of the labels and title.
thank you
If the datagrid inside popup is wider than max screen width, then there is no scrollbar to scroll it horizontally, which means user cannot see the whole datagrid.
When I tried to somehow hack it and set max width of 100vw for the datagrid, then it partially worked - the content could be scrolled horizontally, but the header remained static; position of header cells didn't match positions of scrolled body cells, which would be confusing for the user.
How to reproduce:
1. Open this link: the componet preview
2. Set screen width to 500px.
3. Open the datagrid using the input arrow button.
Result:
The datagrid is truncated horizontally.
Expected:
The datagrid can be scrolled horizontally..
Hi,
Not sure what the preferred way to report a problem is. I have posted it on GitHub as well:
https://github.com/telerik/kendo-react/issues/1519
Could someone help me out with this issue?
Thank you in advance.
Hi,
Please check this example
https://stackblitz.com/edit/react-bri58e?file=app%2Fmain.jsx
We wanted to break the page once its started overlapping the footer.