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;

Hi,

We have a use case in our project where we need to track changes made for the user to provide the batch edit functionality. So we have data and initialData initialized, data is passed to the grid and in onItemsChange we change only the data, and we never touch the initialData except if the data from the server comes back(we make new API call). 
But the initialData changes also when we change data.

Here is reproduced example that I got from your page and i just added initialData state. Here we can see that everything changes and not just data={data} that was passed to the grid and updated in onItemsChange function.

Demo: Demo from KendoReact examples

Is this the expected behaviour that initialData, data and even sampleproducts change even though i only want to modify data that was passed to grid, and the one modified in onItemsChange function.

Best regards

Code sandbox which reproduces the error: pensive-galileo-ksx7nr - CodeSandbox (you need to click to expand a row, then you will have an inner grid, try to click on items inside and see how outer grid selection changes)

I have a Grid and in details row I have another grid (detailRow={MyCoponentWithAnotherGrid}). When I click on the row within the inner grid, also the outer grid fires the event onSelectionChange. It is normal but inside the event for this outer grid, I have info that the even was fired for the outer grid but the endRowIndex property of the event shows that the item clicked had index from the inner grid. Because of that, when I use 

getSelectedState({
          event,
          selectedState: selectedState,
          dataItemKey: DATA_ITEM_KEY,
        });

It returns me the new selection which selects the item under the same index as in the inner grid... but this event is in the outer grid. So If i have a grid like this:

- Item 1
  - Item 1.1
  - Item 1.2
-Item 2

Hello,

I'm having trouble with KendoReact Grid data. The data is in a complex JSON format, and I'm not sure how to properly display it on the grid. The JSON data changes dynamically, so I can't predetermine its structure for the return for this format.

 <GridColumn field="ProductID" title="ID" width="40px" />
 <GridColumn field="ProductName" title="Name" width="250px" />
 <GridColumn field="Category.CategoryName" title="CategoryName" />
 <GridColumn field="UnitPrice" title="Price" />
 <GridColumn field="UnitsInStock" title="In stock" />

I'm using the Map function to dynamically show the data, but it's leading to multiple instances of data being displayed as [object, object]

Can you offer some guidance on how to address this problem?

this is my code link.

https://stackblitz.com/edit/react-v7tmhx?file=app%2Fproducts.json,app%2Fmain.jsx