Hi Team,
Combining Chart Series with Pattern-specific rendering. The requirement was to combine/group the chart items where one will be solid and the other will be pattern-specific. I created one sample, and it's working as expected.
Working Example - https://stackblitz.com/edit/react-hxpthdxt-yevr77he?file=app%2Fapp.jsx
I created one more sample for the test. If I pass the chart component on the page itself, then it's working fine, but when the chart props are passed to the global object, then it's throwing an error.
Failed to execute 'structuredClone' on 'Window': (e) => e.dataItem.chartColor could not be cloned.
Reference Example - https://stackblitz.com/edit/react-hxpthdxt-ufdubb7e
Note - If you comment/delete the second-chart, then you can see the first-class chart render correctly.
Versions Used -
"@progress/kendo-react-charts": "^9.5.0",
"react": "^16.14.0",
Please look into it as soon as possible.
Thanks,
Mahesh
Hello,
I need a draggable modal window with a KendoReact Form. What is the best way to set focus to the selected input?
Right now I'm using the Window component (because it's draggable) with the modal={true} option. Unfortunately, the Window component doesn't have an autoFocusedElement prop, which the Dialog component does.
Best,
Tomek
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
Question: Do you plan to introduce DataResult support for React TreeList in closest feature
I have an App that uses a barcode scanner and interacts with a website using a webview control. The scanner does not use a keyboard wedge to return data - it uses a callback function to pass the scanned barcode data into the website (built using React and Telerik controls).
In order to provide a target for the barcode data, the user must click the editable control (to place the focus on the control) so that the scanned barcode text is then placed in that control. For a text box, this is a trivial matter, but for a dropdown list this seems to be more complex. When a user selects the dropdown list, the list opens up complete with the search box. Is there a programmatic way of populating that search box with the text obtained from the barcode scan? I have even tried directly manipulating the DOM to try to set the inner text property, but without success.
Thanks in advance
Mike
I'm trying to add a simple expansion panel to my page. I need to use extra-large chevron-up down expand and collapse icons. I've tried creating an SvgIcon react element and setting its size that way, but I get a typescript error saying the element is missing the name. Is there a simple way to change the expand and collapse svg icon sizes on an ExpansionPanel? This is something I've tried so far:
const expandIcon = (
<SvgIcon className="k-mb-xs k-mx-sm" icon={chevronUpIcon} size="xxlarge" />
);
return (
<ExpansionPanel
title={title}
expanded={expanded}
expandSVGIcon={expandIcon}
onAction={(event) => {
setExpanded(!event.expanded);
}}
>
<span />
<Reveal>
{expanded && <ExpansionPanelContent>{children}</ExpansionPanelContent>}
</Reveal>
</ExpansionPanel>
);
I'm using the React DataGrid (version 9.4.1). The grid includes filtering at the top and a few fields in each row that are optionally editable. The grid also has row selection configured and working. When row selection is enabled, I'm no longer able to type a space in the filter fields or in any editable row field. It appears the space key is being captured to handle row selection. As soon as selectable is disabled
selectable={{ enabled: false }}
then the space bar works as expected when typing in a filter field or editable field in a row. Is there any way to opt out of using the space bar for row selection? Is there any configuration that can address this conflict?
To see this problem in action visit this doc page: https://www.telerik.com/kendo-react-ui/components/grid/selection/row-selection
Select the "Edit In" StackBlitz option for the demo grid. Open the app.tsx file and add this property to the grid: filterable={true}. Then save the change which should render the grid with a filter field above the Product Name column. Try typing text in the product name filter with a space and notice this is not possible. The same applies if the row has an editable field that accepts text.