Telerik Forums
KendoReact Forum
3 answers
289 views

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.

Stefan
Telerik team
 answered on 23 Jul 2019
1 answer
192 views

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>

Stefan
Telerik team
 answered on 19 Jul 2019
3 answers
1.3K+ views

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.

Ava
Top achievements
Rank 1
 answered on 19 Jul 2019
2 answers
198 views

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

Vinod
Top achievements
Rank 1
 answered on 17 Jul 2019
2 answers
332 views

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.

Stefan
Telerik team
 answered on 16 Jul 2019
1 answer
1.8K+ views

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.

 

Kiril
Telerik team
 answered on 15 Jul 2019
4 answers
170 views

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!

Bill
Top achievements
Rank 1
Veteran
 answered on 08 Jul 2019
1 answer
1.4K+ views
I want to add multiple sheet during export. Please suggest me to add multiple sheet in single excel file 
Stefan
Telerik team
 answered on 08 Jul 2019
1 answer
204 views

Hi,

How do you indent numeric data to the right inside a Grid.

Regards,

Vinod

Stefan
Telerik team
 answered on 05 Jul 2019
2 answers
1.0K+ views
Hi,

I'm trying to implement an onBlur-event with an associated function in the editor for Kendo react.
I assume thar can be done with the onMount event and setting the appropriate prop of the EditorView,
but i can't get it quite right.
Matthias
Top achievements
Rank 1
 answered on 04 Jul 2019
Narrow your results
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
DatePicker
Styling / Themes
Editor
TreeList
Styling
PDF Processing
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Tooltip
Accessibility
NumericTextBox
Checkbox
Menu
Gantt
DateTimePicker
PDF Viewer
Popup
Window
AutoComplete
DateInput
Sortable
Data Query
Licensing
TabStrip
Drawing
Calendar
Pager 
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
TaskBoard
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
ContextMenu
MultiViewCalendar
Stepper
MultiColumnComboBox
MultiSelectTree
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
DropDownTree
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
Agentic UI Generator
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
OTP Input
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?