Hi, 

how can I add a function that invokes when a user doubles clicks on grid row.

I want to implement a modal with a form that will open with row details, how can I do that?

Hi,

I am using a menu similar to the one used here https://stackblitz.com/edit/react-raladh?file=app%2FDrawerContainer.jsx

However, I would like to hide and display the child items given a condition. Do you have any recommendation for achieveing that?

Best regards,

Ive been having a problem when using the area chart component, it is not filling all the area with the color, so it remains blank on some lines.

Attached is the result so far.

const ChartComponent = () => {   
     const firstSeries =    [
		{
			date: '2021-03-29T00:00:00+00:00',
			score: 573
		},
		{
			date: '2021-04-05T00:00:00+00:00',
			score: 630
		},
		{
			date: '2021-04-12T00:00:00+00:00',
			score: 643
		},
		{
			date: '2021-04-19T00:00:00+00:00',
			score: 589
		},
		{
			date: '2021-04-26T00:00:00+00:00',
			score: 589
		},
		{
			date: '2021-05-10T00:00:00+00:00',
			score: 544.25
		}]  
                const data = firstSeries.map(s => Math.round(s.score));
	        const labels = firstSeries.map(s =>s.date);

                return( <Chart>
				<ChartArea height={441} />
				<ChartCategoryAxis>
					<ChartCategoryAxisItem
						majorGridLines={{ visible: false }}
						justified={true}
						categories={labels}
						labels={{ rotation: 'auto' }}
						type="date"
					/>
				</ChartCategoryAxis>
				<ChartValueAxis>
					<ChartValueAxisItem
						min={Math.round(Math.min(...data) / 10) * 10}
						majorGridLines={{
							visible: false
						}}
						title={{
							text: 'Scaled Score'
						}}
					/>
				</ChartValueAxis>
				<ChartSeries>
					<ChartSeriesItem
						type="line"
						data={data}
						markers={{
							visible: true,
							type: 'circle'
						}}
						color="rgb(0 143 204)"
					/>
					<ChartSeriesItem type="area" data={data} color="rgb(214 237 247)" />
				</ChartSeries>
                        </Chart>
      )
}

Can someone possible tell me whats wrong here?

I am using vite to build.

npm run build

> tsc && vite build

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridCellProps.d.ts:8:18 - error TS2430: Interface 'GridCellProps' incorrectly extends interface 'CellProps'.
  Types of property 'onChange' are incompatible.
    Type '((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | undefined' is not assignable to type '((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | undefined'.
      Type '(event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any;
}) => void' is not assignable to type '(event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void'.
        Types of parameters 'event' and 'event' are incompatible.
          Property 'dataIndex' is missing in type '{ dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }' but required in type '{ dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }'.

8 export interface GridCellProps extends CellProps {
                   ~~~~~~~~~~~~~

  node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridCellProps.d.ts:40:9
    40         dataIndex: number;
               ~~~~~~~~~
    'dataIndex' is declared here.

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridColumnProps.d.ts:12:18 - error TS2430: Interface 'GridColumnProps' incorrectly extends interface 'ColumnBaseProps'.
  Types of property 'cell' are incompatible.
    Type 'ComponentType<GridCellProps> | undefined' is not assignable to type 'ComponentType<CellProps> | undefined'.
      Type 'ComponentClass<GridCellProps, any>' is not assignable to type 'ComponentType<CellProps> | undefined'.
        Type 'ComponentClass<GridCellProps, any>' is not assignable to type 'ComponentClass<CellProps, any>'.
          Types of property 'propTypes' are incompatible.
            Type 'WeakValidationMap<GridCellProps> | undefined' is not assignable to type 'WeakValidationMap<CellProps> | undefined'.    
              Type 'WeakValidationMap<GridCellProps>' is not assignable to type 'WeakValidationMap<CellProps>'.
                Types of property 'onChange' are incompatible.
                  Type 'Validator<((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined> | undefined' is not assignable to type 'Validator<((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined> | undefined'.
                    Type 'Validator<((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined>' is not assignable to type 'Validator<((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined>'.
                      Type '((event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined' is not assignable to type '((event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void) | null | undefined'.
                        Type '(event: { dataItem: any; dataIndex: number; syntheticEvent: SyntheticEvent<any, Event>; field?: string | undefined; value?: any; }) => void' is not assignable to type '(event: { dataItem: any; syntheticEvent: SyntheticEvent<any, Event>; field?: string
| undefined; value?: any; }) => void'.

12 export interface GridColumnProps extends ColumnBaseProps {
                    ~~~~~~~~~~~~~~~

node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridHeaderCellProps.d.ts:8:18 - error TS2430: Interface 'GridHeaderCellProps' incorrectly extends interface 'HeaderCellBaseProps'.
  Types of property 'render' are incompatible.
    Type '((defaultRendering: ReactNode, props: GridHeaderCellProps) => ReactNode) | undefined' is not assignable to type '((defaultRendering: ReactNode, props: HeaderCellBaseProps) => ReactNode) | undefined'.
      Type '(defaultRendering: ReactNode, props: GridHeaderCellProps) => ReactNode' is not assignable to type '(defaultRendering: ReactNode,
props: HeaderCellBaseProps) => ReactNode'.
        Types of parameters 'props' and 'props' are incompatible.
          Property 'columnMenuWrapperProps' is missing in type 'HeaderCellBaseProps' but required in type 'GridHeaderCellProps'.

8 export interface GridHeaderCellProps extends HeaderCellBaseProps {
                   ~~~~~~~~~~~~~~~~~~~

  node_modules/@progress/kendo-react-grid/dist/npm/interfaces/GridHeaderCellProps.d.ts:16:5
    16     columnMenuWrapperProps: GridColumnMenuWrapperProps;
           ~~~~~~~~~~~~~~~~~~~~~~
    'columnMenuWrapperProps' is declared here.


Found 3 errors.

Do i need some special settings for my tsconfig.json?

Hi,

I have created an offline application using React and as part of the functionality want to display RTF content in the viewer or editor which is being read from database.

Let me know if KendoReact Rich Text Editor can help me achieve this functionality. Please consider that this component should support offline application and should be part of the setup package.

For reference attaching the file having the RTF content.

Appreciate a quick response. Also if the works then let me know what would be the pricing for this license.

Regards,

Atif 

When compiling my SpFx web part I receive the following errors:

[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected.
[08:59:40] Error - 'tsc' sub task errored after 2.75 s 
 exited with code 2

In the past I've updated the out of the box dispatch code (one line) but can't find where it was posted on this forum. Any assistance with this is greatly appreciated. Thank you

Currently these components don't have a react support yet. Therefore I have 2 questions:

1. When is the support for these 2 components planned?
2. How can I still implement them in my React project? (via a wrapper or something, an example of how to do it would be amazing and a huge help!)

Thanks in advance!

Dervis

Hi, I am trying to figure if it is possible to change the style of the paging buttons.

I using the Boostrap theme and it looks like that :

and I want to make it like this:

it is possible? which changes do I need to do on CSS?

Hi telerik team

I'm trying to implement the "add new row" function in a Grid >Editing >inline component.

I have followed the steps as you have in the documentation, but somehow, every time I trigger the "add" function it inserts new two rows with the same values and same id.

this is my code. Any ideas what I'm doing wrong? Thanks!

const GridComponent= () => {
    const editField = "inEdit";
    const [data, setData] = React.useState([]);
 
const functionToGetInfoInFromAPI{ setData(result.data)}
useEffect(()=>{
    functionToGetInfoInFromAPI()
}, [])
const generateId = (data) => {
    let highestId = 0;
    data.forEach((item) => {
        if(item.casystem_id > highestId) {
            highestId = item.casystem_id;
        }
    })
    return highestId+1;
}
 
const insertItem = (item) => {
   item.inEdit = false;
    item.casystem_id = generateId(data);
const newDataArray = [item, ...data];
return newDataArray;


};
const add = (dataItem) => {
dataItem.inEdit = true;
        const newData = insertItem(dataItem);
        setData(newData);

};
const itemChange = (event) => {
const field = event.field || "";
    const newData = data.map((item) =>
        item.casystem_id === event.dataItem.casystem_id
            ? { ...item, [field]: event.value }
            : item
    );
    setData(newData);
};

const addNew = () => {
const newDataItem = {
inEdit: true,
        Discontinued: false,
    };
    setData((oldData) => [newDataItem, ...oldData]);

};
 
export const MyCommandCell = props => {
    const {
        dataItem
    } = props;
    const inEdit = dataItem[props.editField];
    const isNewItem = dataItem.casystem_id === undefined;
    return inEdit ? <td className="k-command-cell">
        <button className="k-button k-grid-save-command" onClick={() => isNewItem ? props.add(dataItem) : props.update(dataItem)}>
            {isNewItem ? "Add" : "Update"}
        </button>
        <button className="k-button k-grid-cancel-command" onClick={() => isNewItem ? props.discard(dataItem) : props.cancel(dataItem)}>
            {isNewItem ? "Discard" : "Cancel"}
        </button>
    </td> : <td className="k-command-cell">
        <button className="k-primary k-button k-grid-edit-command" onClick={() => props.edit(dataItem)}>
            Edit
        </button>
        <button className="k-button k-grid-remove-command" onClick={() =>  window.confirm("Confirm deleting: " + dataItem.comp_nickname) && props.remove(dataItem)}>
            Remove
        </button>
    </td>;
};
                
<Grid
    data={data}
    onItemChange={itemChange}
    editField={editField}
    dataItemKey={"casystem_id"}
>
    <GridToolbar>
        <button title="Add new" className="k-button k-primary" onClick={addNew}>
            Add new
        </button>
    </GridToolbar>
    <Column field="casystem_id" title="id" editable={false}  />
    <Column field="nickname" title="Nickname"   />
    <Column cell={CommandCell} width="240px" />
</Grid>