I use a Datepicker with 'he' loclae. It works fine, but the week's days are displayed from left to right instead of right to left as expected.
I tried to add className = 'k-rtl' but it did not help.
Is there a way to change that?
Here is a demonstration of the problem:
https://stackblitz.com/edit/react-vkzwzo?file=app%2Fmain.jsx
Set up a TimePicker with a `min` and `max`. For example
min={new Date(0, 0, 0, 0, 0)} max={new Date(0, 0, 0, 5, 0)}
Click on the text input to focus the 'hours' portion.
Roll the mouse scrollwheel up/down to change the hours.
You can 'scroll' past 5:00 and set the time to anything above the max.
You can also use the keyboard to enter any number outside the min/max.
Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?
A TimePicker control will take all scroll events if the mouse cursor is over it, whether the element has focus or not, and prevent the scroll from bubbling up to the page. This prevents a page from scrolling as soon as the mouse cursor touches a TimePicker.
Using Kendo rect v5.1.0 in FireFox v98 on OSX. (Issue does not happen in Chrome)
You can view the problem in the demo page: https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/
Just try to scroll down the view, and as soon as the TimePicker is under the mouse cursor, the page can no longer be scrolled until you move the cursor off the control.
On this page: https://www.telerik.com/kendo-react-ui/getting-started/
There's a syntax mismatch in end-of-line semicolons.
This line ends with a semicolon:
```js
import '@progress/kendo-theme-default/dist/all.css';
```
This line does not end with a semicolon:
```js
import { Calendar } from '@progress/kendo-react-dateinputs'
```
All teams that I know of consider it to be an error to do both ways in the same file.
The solution is to pick one way then be consistent. The broader solution is to use a linter, such as ESLint, that can process the code to ensure you're using your expected syntax and formatting.
Hi there,
I can see there is a column chooser component for the Angular Data Grid e.g. https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-column-chooser-item but there is not an equivalent for the React Data Grid (unless you code it yourself).
The DevExpress React Grid does have this feature https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-visibility/ so we were wondering if such a thing is planned React Data Grid?
Thanks very much,
James
Hello Support Team,
We are migrating our ASP MVC application to React JS and need your help in scheduler time-line view. In ASP MVC you provided the functionality to render the custom template for Resource Title or we can say for the user name. But we are unable to implement the same functionality in react js, and this is the important module of our application. Our application client strictly say he needs 100% same application as it is in ASP MVC version.
We request you to please add this feature to the Scheduler in the coming updates & this would be useful to the other users also.
Thank You.
Hi Team,
I am facing one challenge to create a Calendar view with multiple date selection with multiple colors.
Please suggest and share class component references to achieve the same.
Please refer attached video or do let me know if you have any questions.
Thanks.
If you show a Grid with no rows, the Kendo Grid displays a `k-grid-norecords` row. The generated HTML for this is:
<tr class="k-grid-norecords" aria-rowindex="2"><td colspan="5">No records available</td></tr>
If you run Axe accessibility checks (axe-core 4.4.1) against this, it reports:
Impact: critical
Elements must only use allowed ARIA attributes
ARIA attribute is not allowed: aria-rowindex="2"
Currently the MultiSelectTree Component doesn't have Virtualization therefore is unable to provide infinite scrolling.
Please can this be added.
Thank you,
Hello,
After updating the kendo version in my project to "^5.1.0" I've noticed that some errors are appearing in our console when we are trying to resize items in the Scheduler.
"use-resize-item.js:53 Unable to preventDefault inside passive event listener invocation."
I have attached a video with the error.
Thanks!
I'm working with the MultiSelect dropdown.
My issue is that feeding my own search control into the header of the dropdown itself seems to be impossible.
Our design calls for this component, but requires a search input within the dropdown itself. I've tried to insert one as a header, but your control is built in a way that forces the dropdown to close when the header of the dropdown is clicked. Making my attempted customization of the component impossible. From quick testing it seems the other dropdowns are built this way as well. Making components work in the header and footer (without closing the popup) would greatly increase the customizability of the dropdowns.
It also seems that the current search input within the button can't be removed or changed to readonly. Our design doesn't expect customizable input in the button. It seems that even if you have filtering turned off it still accepts input that does nothing.
Any chance you could provide simple sample code (stackblitz ideally) demonstrating how to combine multiple PDFExport's into a single PDF file?
The need to combine comes from wanting page numbering to start at 1 within each individual pdf render.
Totally open to using the lower level exportPDF from the drawing library... perhaps there's a straightforward path to combining the individual DataURI's? also open to using additional 3rd party npmjs libraries.
I would like the occurrencesInRange function from jQuery to be implemented in KendoReact.
This allows calculating collisions with recurring events onDrag or onResize.
It appears the visible elements with the dataItem are available in the SchedulerViewItemsContext props. If this context were accessible with a hook perhaps that would be enough?
Thanks
The data tool Filter component allows me to build an AND/OR filter query. It has a button for adding additional Group objects for nesting query parameters.
Can you please add an option that disables that button so that the user can only add basic AND/OR filters? No additional Groups?
Thank you,
Ryan
The current grouping implementation renders the resources in each parent group, making duplicates.
The request is for providing an option for grouping resources by adding child items to a specific parent item only (without duplicating them in each group). The UI could be something similar to the following (with collapse/expand functionality):
We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.
Steps to Reproduce:
<DropDownButton text={<div>test text</div>}>
Expected Result:
aria-label contains the text inside the React.Node
aria-label="test text dropdownbutton"
Actual Result:
aria-label contains [object Object]
aria-label="[object Object] dropdownbutton"
In the Checkbox onChange
callback, event.nativeEvent.target.checked
seems to be set differently depending on whether the input was toggled by mouse click or by pressing space.
After clicking on the Checkbox, event.value
and event.nativeEvent.target.checked
will have the same value, consistent with the Checkbox's new state.
After pressing space with the Checkbox focused, event.value
and event.nativeEvent.target.checked
will have different values, with event.value
containing the Checkbox's new state and event.nativeEvent.target.checked
containing the Checkbox's old state.
I would expect event.nativeEvent.target.checked
to be set the same way regardless of whether I am toggling the Checkbox with mouse or keyboard. Furthermore, I would expect event.value
and event.nativeEvent.target.checked
to always be equal to each other.
I made a code sandbox to demonstrate the bug here: https://codesandbox.io/s/kendo-react-checkbox-bug-26f7ur