Hi,
We prefer to have keyboard up/down cursor correspond to navigating input focus up/down a row in the KendoReact Data Grid.
We are already successfully using custom GridColumn Cells to render inputs at all times in tandem with a Grid.onKeyDown handler that finds the next input to set focus.
(for anyone interested this only took a few lines of code to implement a dom navigation heuristic that finds the column index of the nearest TD via onKeyDown event.nativeEvent.target.closest("td") and then finds the corresponding td to that same column index in the next TR up or down, and then hits the first nested native html <input> found to call focus() - this seems simple and durable to variances in nested components as long as there is a native input to be found, hence the need to render inputs at all times... which does run counter to the approach i saw represented in the KendoReact demos based on setting a particular dataitem's "inEdit" property which wasn't the look we were going for =)
The above cursor navigation is working but before it kicks in, inputs like the DateTimePicker are also taking a cursor up/down to change the date segment that currently has focus - and this doesn't seem to be optional behavior yet?
I believe the fundamental challenge to any dom "wrapper" approach is by the time an outer dom element receives onKeyDown it's too late for event.preventDefault or event.stopPropagation to hide it from the inner input element (the native kendoreact inputs in this case).
Hence the ask here to have an option to ignore that at on the individual KendoReact input components.
With previous KendoReact component builds (e.g. 8.2.0) we successfully proved "patch-package" various subcomponents of DateTimePicker, NumericTextBox and MultiSelect to prevent them from responding to up/down cursor events.
Of course patch-package approach is fragile to upgrades and sure enough recent need to take @progress/kendo-react-dateinputs@9.1.0-develop.6 to get into DateTimePicker formatPlaceholder bug fixes broke previous patches, highlighting need for more resilient fix.
I've attached the latest patch-package files to give precise reference to what keyboard events we're interested in disabling.
I'm assuming this is a feature request and happy to have it reallocated to a support ticket... but wanted to post it in open forums in case community might have alternative suggestions to achieve what we're looking for?
Maybe other approaches to what seems like it could be a general html nested component strategy pattern?
For instance, I'm hesitant to pursue any removeEventListener based approaches for fear of how that might conflict with how i vaguely understand react is continually recreating dom elements upon each render cycle, so i'd be open to encouragement in that direction if anyone has experience to share?
Also wondering if this falls into the realm of "accessibility" and maybe there's already ways to disable accessibility? (as negative as that sounds).
Drag-and-Drop editing is a very usefull and required functionality in a lot of enterprise apps (Move/resize tasks along the timeline, adjust completion percentage, dependencies editing).
We noticed these features are (maybe partially) available in the Kendo Gantt components for (at least) jQuery and Angular.
Are there plans to introduce similar functionality in the KendoReact Gantt component? If so, could you share a timeline for implementation? Or maybe you can suggest some workarounds?
We’d greatly appreciate your insights on this point, as it's critical to our evaluation process.
Environment (OS, Application, Versions):
OS Version: 22H2 (OS Build 25352.1)
Edge Dev: Version 121.0.2277.112 (Official build) (64-bit)
Repro Steps:
1. Open https://codepen.io/oneID/pen/LYaGREP and turn on NVDA.
2.Navigate to Populate grid and activate it using enter key.
3.Navigate to Expand button under domain in export to excel table.
4.Verify if the accessible name and role for the expand button is correct or not.
Actual Results:
Accessible name for the 'expand' button is not correct, Expand button is defined as link.
Expected Results:
Accessible name of 'expand' button should be sufficient for screen reader user. Accessible name should contain value available in domain as well.
Role should be defined as 'Button' as its behaving as button.
In the kendo-react-data-tools component, we want to introduce the Autocomplete behavior in Fields.
For example, in the https://www.telerik.com/kendo-react-ui/components/datatools/ link, only 3 fields ( like Name, Price and Discontinued ) were used.
In our application, we have more than 100 fields and the user has to scroll all the way down to pick the required field for applying the filter.
Hi,
Using KendoReact Scheduler component the functionality to group the events by date, then by resources is not supported. I can only group them by resources first, then by date.
This feature exists in Kendo for jQuery Scheduler component and can be configured by setting the group.date property to true as following:
group: {
date: true,
resources: ["Rooms"]
}
Hello,
We have migrated to Kendo React (from jQuery) and are unable to use Directory upload functionality which existed in jQuery version:
https://demos.telerik.com/kendo-ui/upload/directoryupload
Currently in order to achieve such functionality, the only way is to inject required file input attributes manually as shown below:
useEffect(() => { if (uploadWrapperRef.current) { const targetInput = uploadWrapperRef.current.querySelector('input'); isFolder ? targetInput.setAttribute('webkitdirectory', '') : targetInput.removeAttribute('webkitdirectory'); } }, [uploadWrapperRef, isFolder]);
This partially solves the issue, however because the directory upload functionality is not provided natively, we are unable to use drag-and-drop functionality for folders. There is no way to overwrite 'onDrop' functionality, which currently accepts only files but not folders.
Would it be possible to add Directory upload to KendoReact as well?
Kind regards,
Emil
The TreeList component has almost of all the same functionality as the Data Grid, but it lacks the ability to automatically resize the columns based on the content when clicking the table cell headers. The demo of the Data Grid Column Resizing shows this behaviour. The jQuery TreeList also supports this behaviour.
It would be great if the KendoReact TreeList could also enable auto-resizing of columns in this way as it feels like the natural way to automatically set the size of columns.
Hi, I am Lavanya!
in my dropdown list, there are horizontal layouts I need to change to the vertical dropdown list
and also I have attached bar data in that I need to make a dropdown filter of the month how can I use that
Controlled TextaArea componenet with autoSize and rows properties.
const App = () => {
const [state, setState] = useState();
return (
<TextArea
value={state}
onChange={(e) => setState(e.value)}
autoSize={true}
rows={2}
/>
);
};
Add couple text lines to extend TextArea size and remove these empty lines in any way.
Content from TextArea field is removed but TextArea height stays the same, doesn't come back to it's initial value. It's different comparing to example from your docs where example contains uncontrolled component.
Controlled TextaArea componenet with autoSize and rows properties.
const App = () => {
const [state, setState] = useState();
return (
<TextArea
value={state}
onChange={(e) => setState(e.value)}
autoSize={true}
rows={4}
/>
);
};
and styles like these
.k-textarea textarea {
border: 1px solid blue;
}
Start typing anything
Height of textarea component is decreasing
we have X(cross) for combo box but it is not coming for datetime picker
Walkthrough component.
The component will allow the developer the create a step by step guide over the page.
This will highlight a collection of elements in a set order on the page with a tooltip showing the newly introduced feature.