As per the subject. This can be observed in the following StackBlitz which is forked from the Telerik documentation on resizing with three small changes:
https://stackblitz.com/edit/react-vajzshwv?file=app%2Fapp.tsx,index.html
Logged as a bug because there is nothing in the documentation stating that a height for the Grid or Grid container must be set in order for this to work. If this is a documentation issue rather than a code issue, please advise the recommended approach for using the Grid resizable property.
Hi,
I have run into an issue when trying to input a date value where its parts contain a leading 0. The autoCorrectPaths option is set to false and I have specified a date format in my datePicker component.
Reproduction:
1. open https://stackblitz.com/edit/react-wz6zocpe?file=app%2Fapp.jsx
2. try to input a date by typing 09, then 03, then 2025
Expected behaviour:
The date in the input field should be "09.03.2025"
Actual behaviour:
The date in the input field is "day.09.2000"
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).
@progress/kendo-react-inputs@9.0.0
going back to this ticket, we'd like to use CTRL+up/down for our own purposes... as such, you can now disregard that feature request in lieu of fixing this bug =)
since this is undocumented behavior (documentation screenshot below) i believe we have a legitimate bug claim.
also, other controls like DateTimePicker reliably ignore the CTRL+up/down while implementing bare up/down as documented.
As stated in the subject, the GridNoRecords component has an undocumented maximum width of 20em after which the GridNoRecords message is cut off. Please see the following StackBlitz for an example: https://stackblitz.com/edit/react-2z8hh63r?file=app%2Fapp.tsx
Kind regards,
David
The new Built-in State Management does not work with remote data.
For example:
PageSize = 40.
Remotely fetch 40 items.
Click on page 2.
Remotely fetch 40 items.
The grid shows no items, since items 41-80 does not exist in the data provided.
Verified with support who suggested adding a feature request.
Problem: DataResult isn’t supported
Why do we complain about this:
We want to use virtual scroll functional, but without DataResult support we have to load all items at once (data is pretty massive), which produce unnecessary overload of network.
Does it supported by other components or implementations: Angular TreeList, React Grid
As stated in the subject. To reproduce:
npx create-react-app my-app --template typescript
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
npm i @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-data-tools @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-buttons @progress/kendo-react-treeview @progress/kendo-react-popup @progress/kendo-svg-icons @progress/kendo-theme-default
<div className="App">
<header className="App-header">
<Grid>
<GridNoRecords>This generates TS2786</GridNoRecords>
</Grid>
</header>
</div>
Confirm that npm start results in error TS2786 (see screenshot).
Please see attached for the sample project (with the node_modules folder removed). I believe this error was introduced in v9.0.0 as part of the migration from classes to functional components.
Hello,
We are currently developing an application based on Kendo React components.
We are wondering if the React-Gantt chart has the functionality to edit the data by drag-n-drop the same way it possible with JQuery-Gantt (see attachment).
Thanks in advance for your help.
Kind regards,
Sergei
Hi Team,
We are using data-grid along with excel export for showing lakhs of data (sometimes over 20 lakhs) in our app and over 80 columns. We found a the TIME TAKEN is over 2.5 mins for over 10 lakhs (rows*cols) data. We have tried the KendoOmxml with kendo saveAs function from file-saver as well.
I have tried with server-side export instead of client-side aslo and still it's the same behavior. In my observation I am suspecting the below line.
component.toDataUrl().then((dataURL) => {
Here component is the reference of ExportExcel component. After getting dataURL I am calling save api to download the file. But toDataUrl() function is taking the whole time. Is there any way we can get this base64 dataURL faster?
You can refer to the codeSandbox Link. We have 80 columns(including duplicates), while importing productsSmall.json file which contains 77 rows, export excel is working well and good. But when you change the import to productsLarge.json file which contains 10,000 rows (if cannot be seen, please copy paste the dummy data from attached file with even more usual amount of data we use in our app), the screen is stuck or takes too much time to get process complete and sometimes it throws error(maybe because of codesandbox incapability).
Stackblitz link (if codesandbox hangs more) https://stackblitz.com/edit/react-q5wlpg-4bs2zc?file=app%2Fmain.tsx
We have a large number of customers requesting this feature to be fast. Please let us know with an optimized solution.
Regards,
Manjula
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.
The DatePicker and DateInput React components miss the customizable button to clear the date value.
Would be nice to have ability to customize the icon, size, margins and a selectable option to clear the date value to null or a default value (as set to the component) or bind a custom event handler.
Hi Team,
I am writing to inquire about modifying the default behaviour of the Kendo UI Menu component. The sub-menu items are displayed when hovering over the parent menu item. However, I require the sub-menu items to be visible only when the parent menu item is clicked.
Desired Behavior:
Sub-menu items should remain hidden by default.
Clicking on the parent menu item should expand the sub-menu and display the child items.
Clicking on another parent menu item should collapse the previously expanded sub-menu and expand the new one.
Implementation Challenges:
I have explored the Kendo UI documentation and API, but I am unable to find a direct configuration option to achieve this desired behaviour.
Could you please provide guidance on how to modify the Kendo UI Menu component to display sub-menu items only on click of the parent menu item?
Please let me know if you require any further information or if there are any examples available that demonstrate this functionality.
Reference URL - https://stackblitz.com/edit/react-zugkrezk?file=app%2Fapp.jsx,app%2Fapp.css
Reference Ticket - https://www.telerik.com/account/support-center/view-ticket/1679073
Thank you for your time and assistance.
Mahesh