Hello,

we have a few specific use cases that requires us to configure inCell editing in all cells, so text, numeric, date, and time (Time picker). We are using rowRender and cellRender that are defined in renderers file.
The problem which came to light was that on text and numeric it loses focus on change of value because it rerenders because dataItem changes for the given component, but in renderers in CellRender we capture focus again with input ref, so case for input and numeric text box works.
Problem is with DateRangePicker, on selecting any value it closes. So for example if I change the start value, I want it to remain open but instead it immedietaly closes because dataItem changes and we call onChange. Entering the input in DateInput of the picker results in same thing. We tried to programmatically call onBlur and control it's show property but it is just weird. OnBlur method of DateRangePicker is called on first clicking on value, and then every other value the method is not called until you close it which is expected behaviour expect for the onBlur on first click.

Ideally, we would like to use custom cells: https://www.telerik.com/kendo-react-ui/components/grid/cells/

And we tried to implement them with inCell editing but we ran into this issue.

We would like to define our data cell for showing data. And have custom cells for edit: {text, numeric, date} which are all inCell and use that throughout the project and that they behave as we would expect it. Is there an example or PoC in which there is InCell editing with custom cells that inlcude both text, numeric, date (DateRangePicker or DatePicker)?

Thank you for your help!

I recently upgraded my node version from 14 -> 18.

After the upgrade, i started getting incompatible props datatype errors like the one below. 

Can you please help me on how to fix this issue? I've spent so much time debugging this. I'd appreciate any help. Thanks in advance!

Error

TS2769: No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'typeof Editor' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'typeof Editor' is not assignable to type 'StyledComponent<any, any, any, never>'.
        Type 'typeof Editor' is not assignable to type 'string'.
  Overload 2 of 2, '(component: keyof IntrinsicElements | ComponentType<any>): ThemedStyledFunction<keyof IntrinsicElements | ComponentType<any>, any, {}, never>', gave the following error.
    Argument of type 'typeof Editor' is not assignable to parameter of type 'keyof IntrinsicElements | ComponentType<any>'.
      Type 'typeof Editor' is not assignable to type 'ComponentClass<any, any>'.
        Types of property 'contextType' are incompatible.
          Type 'React.Context<any> | undefined' is not assignable to type 'import("/source/app/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").Context<any> | undefined'.

Code

import { Editor } from '@progress/kendo-react-editor';
import styled from 'styled-components';

export const EditorContainer = styled(Editor)`
  &.k-editor {
    border: none;
    background-color: inherit;
  }

  &.k-editor > .k-toolbar {
    border: none;
    padding-left: 0px;
  }
`;

In your Chapter 04 video #3

I'm trying to change this JSX from:

To its equivalent: 

As you can see, the expression to map the itemTypesProvider array is missing from the KendoReact component.

Adding a child, between the the <DropDownList></DropDownList> tags is not permitted.

(Please see attachment)

How do I get the itemTypesProvider items to populate my DropDownList?

I'm trying to concatenate two values into the textField property for FormComboBox, but it doesn't allow me. Instead I get an error:

Uncaught runtime errors:
ERROR
_utils__WEBPACK_IMPORTED_MODULE_2__.getItemValue(...) is undefined

My code is below. Perhaps someone can help?

<Field
	key={'personU'}
	id={'personU'}
	name={'personU'}
	label={'U'}
	textField={'abc' + 'def'}
	dataItemKey={'uic'}
	placeholder={'U...'}
	component={FormComboBox}
	allowCustom={true}
	data={units}
	virtual={{
		total: uCount,
		pageSize: uPageSize,
		skip: page
	}}
	onPageChange={pageChange}
	/>

 I've tried the following:

textField={'abc' + 'def'}

textField={`${abc} ${def}`}

Hi !

I was wondering if someone already managed to link the Kendo Form to a sort of generated code objects from an OAS file.

Based on research on the web, there are many ways to generated code from a OAS yaml file.

Since we are using Kendo React (without Typescript) and Axios for the API calls, I found two ways:

- open-api specs generator typescript-axios: The problem is that will result in a project mixing plain javascript and typescript;

- take advantage of the Kendo integration with redux: Use redux-toolkit => rtk-query code generation functionality to generate the files then configure it to use Axios. That solution would require lots of refactoring in the application. And, again, there would be a mix with Typescript.

I would be grateful if you could share ideas, solutions or past experiences concerning that subject.

Best regards

I am learning React, and have a very simple React application. When I follow the Getting Started steps for the Grid, I immediately get these errors when I add the <Grid> element to my application.

TS2786: 'Grid' cannot be used as a JSX component.   Its instance type 'Grid' is not a valid JSX element.
Type 'Grid' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

TS2607: JSX element class does not support attributes because it does not have a 'props' property.

import React from 'react';
import { Grid, GridColumn } from "@progress/kendo-react-grid";

const App: React.FC = () => {
	return (
		<Grid data={products}>
			<GridColumn field="ProductName" />
			<GridColumn field="UnitPrice" />
			<GridColumn field="UnitsInStock" />
			<GridColumn field="Discontinued" />
		</Grid>
	);

}

export default App;