Telerik Forums
KendoReact Forum
0 answers
43 views
Is there any method to hide the highlighted  Row and Column as shown below  and attached image as well.


Jaskaran
Top achievements
Rank 1
 asked on 19 Mar 2025
2 answers
30 views
I have a Drawer component with 3 items.

Item1 
Item2
Item3

Item1, Item2 should render insider DrawerContent

but on Item3 I want to load component that has its own routing, basicallly completily new component and new Drawer component

Kindly help.



Yanko
Telerik team
 answered on 18 Mar 2025
3 answers
52 views
Hello,
Is it possible to use the KendoReact Form component in a Dialog/Window so that a WindowActionsBar with buttons is placed at the bottom of the dialog?
At the moment, for the dialog to work correctly, it must consist of two blocks: <container/content><actions/WindowActionsBar>. In such a case, actions bar is glued to the bottom of the window.

Unfortunately, when using the KendoReact Form component, the entire form is in a single form block. The actions bar is treated as content and is not at the bottom of the screen.

Best,
Tomek 
Filip
Telerik team
 updated answer on 17 Mar 2025
1 answer
34 views

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

  • The first chart is working, and the same code is defined on the second chart, but it's still breaking,
  • And behind the chart, some additional background came up after an update of the versions.

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

Filip
Telerik team
 answered on 14 Mar 2025
1 answer
40 views
Version:
@progress/kendo-react-grid: 9.4.1

When using the nagivatable and filterable props on KendoReact's Grid component, the automatically rendered, the input elements for default filter cells are no longer in the tab order.  However, the elements for custom filter cells are in the tab order, as expected.

Please see this stackblitz demo: 
https://stackblitz.com/edit/react-ts-wzme7qjm?file=App.tsx
https://react-ts-wzme7qjm.stackblitz.io

This behavior appears to also be the case on KendoReact 10.0.0.

Is there a known work-around to ensure that the Input components for automatically rendered, default filter cells, are in the tab-order and are tab-focusable?  If not, is this a known issue, and a plan to resolve this?
Yanko
Telerik team
 answered on 14 Mar 2025
1 answer
34 views

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 

Vessy
Telerik team
 answered on 13 Mar 2025
3 answers
34 views

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

Ina
Telerik team
 answered on 12 Mar 2025
1 answer
32 views

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

Plamen
Telerik team
 answered on 07 Mar 2025
1 answer
47 views

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>
);

Hetali
Telerik team
 answered on 06 Mar 2025
0 answers
32 views

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.  

 

Michael
Top achievements
Rank 1
 asked on 27 Feb 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?