We have a Kendo ComboBox configured as the following:
<ComboBox loading={isLoading} placeholder="Enter item number.." data={sourceItems} allowCustom={false} filterable={true} onFilterChange={value => { const userInput: string = value.filter.value; setComboBoxValue(userInput); userInput.length >= 1 && filterData(userInput); }} onChange={value => { handleComboBoxChange(value.target); }} itemRender={(li, itemProps) => { const item: IItem = itemProps.dataItem; let itemChildren = null; if (item.action === 'default') { itemChildren = ( <span> {item.itemNumber} - {item.description} </span> ); } return React.cloneElement(li, li.props, itemChildren); }} value={comboBoxValue} />
But there's a bug: When you start typing a value that doesn't match any of the autocomplete items it will throw this error in the browser console:
onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined at e.setFieldValue (onloadwff.js:71) at HTMLFormElement.formKeydownListener (onloadwff.js:71)
I'm now unsure what will happen if/when this gets fixed and if other parts of my application will need to handle these invalid values or not.

Hi,
I am trying to use PanelBar within a drawer component. I want to be able to navigate on the click of PanelBarItem item. From what I gather from your website (https://www.telerik.com/kendo-react-ui/components/layout/api/PanelBarProps/) is that the onSelect() event is available on the PanelBar and not on PanelBarItem.
Could you please provide an example where in I could use the click of PanelBarItem for navigation purpose.
I tried below code, but instead of <List> and <ListItem> I want to use PanelBar and PanelBarItem. Code below for your reference. Thank you.
<Drawer
variant="permanent"
className={classNames(classes.drawer, {
[classes.drawerOpen]: props.drawerOpen,
[classes.drawerClose]: !props.drawerOpen
})}
classes={{
paper: classNames({
[classes.drawerOpen]: props.drawerOpen,
[classes.drawerClose]: !props.drawerOpen
})
}}
open={props.drawerOpen}
>
<List>
{/* todo: offset for appbar */}
<div className={classes.toolbar} />
{props.data.map((item, index) => (
<ListItem
button
key={index}
component={Link}
to={item.name}
onClick={() => handleMenuItemClick(item)}
>
<img
alt={item.title}
src={`Images/Icons/24x24/${item.iconUrl}`}
/>
<ListItemText
className={classes.menuItemText}
primary={item.displayName}
/>
</ListItem>
))}
</List>
</Drawer>

Is there any way to freeze header row of kendo react grid when i we do scrolling from window scroll bar not the scroll bar in the grid.
Also i want to remove the scrolling area from the grid id there any way to achieve that as well. Please find the screen shot for this the area is highlighted.
Hi,
I only use Functional Component in my application. I want to use Popup control in my application, Popup control successfully finds its anchor for Class component but in the case of Functional component, the Popup is unable to find it's anchor and it always displays in the Top-left corner.
Please refer to attachment. For clarity, I have highlighted the Position of Popup for Functional as well as Class Component.
Thanks in advance.
Regards,
Vinod
Hi Stefan,
I am struggling with this currently. I simply want to default the dropdownlist based on an async data load. I am running a GraphQL query when the component renders, and wish to default the DropDownList to any item in that resulting data array that matches the route parameter passed in (if any).
I cannot find any examples showcasing this.

Hi,
We are trying to customize component level theming using Kendo SAAS based monorepo shared. We are trying to customize primary and secondary color for our application in "_variable.scss". Problem is, its only taking actual color name (like blue or red...) and not hexadecimal color format(#007AB4) or equivalent RGB color format like rgb(0,122,180). Please refer below screenshot.
However most of the other SAAS variables are accepting hexadecimal color notations. Could you please suggest how to customize?
Also, Currently we are searching for component level SAAS variables for component level behavior by using developer tools and trying to find the same in Component level layout.scss or theme.scss files and updating those. Building the repository to generate all.css and referring the same in our application.
This is laborious work and taking lot of time. Is there any easy way to do component level theme or layout customization?
Please suggest.

We are experiencing an issue using custom rendering for the autocomplete component. It happens with the demo example as well.
https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/custom-rendering/#toc-items
Once you use the keyboard to navigate past the entry that breaks to a new line (Bosnia & Herzegovina 7) you no longer see the focused selection as you key down. So it seems to be related to the item heights and if they differ. We don't want to set a height since we have a variety of information. Is there anything we can do to alleviate this behavior?
Thanks!

Hi,
How do you indent numeric data to the right inside a Grid.
Regards,
Vinod
