Questions on KendoReact Forum

2 answers

177 views

Tabs stay on top when opening dialog on dialog

I have a dialog which includes a TabStrip with 2 tabs (see attached image dialog-1.png). "Above" this dialog I opened another dialog but then the tabs from the dialog "underneath" still shine through (see attached image dialog-2.png). I tried to give the top dialog a z-index of 99999 but it did not help like this:

<Dialog
                    title={t('program:datapoints')}
                    onClose={props.cancelForm}
                    width={'60%'}
                    height={'80%'}
                    style={{ zIndex: 99999 }}
                >

Any idea how to solve this issue?

Dialog

TabStrip

answered on 09 Dec 2021

1 answer

969 views

Build error when using Kendo theme with scss

I have added this to my App.scss which I import into App.tsx:

$border-radius: 2px;
$primary-palette-name: lightgreen;
$secondary-palette-name: indigo;
$theme-type: light;
$adjust-contrast: false;
$primary: #bed00c;
$secondary: #026299;
@import '~@progress/kendo-theme-material/scss/all';

If I do this, I get the attached build error if I start my application. I have created my project with create-react-app and I have installed node-sass as recommended in your documentation. Any idea why the build fails?

Styling / Themes

answered on 09 Dec 2021

1 answer

336 views

Stepper focused item doesn't change if value is changed programatically

Hi,

We are using the Stepper as feedback to let a user know what stage of a process they are up to rather than an interactive element i.e. we have a Stepper with no onChange or onFocus, an array of items, and the value is set programatically when the user loads data.

const items: StepProps[] = [ ... ];
const currentStep = items.findIndex((i) => i.key === props.currentStep);

return <Stepper value={currentStep} items={items} />;

On initial page load the stepper renders correctly, however on page refresh if the step changes then the previous step icon is still focused (with a ring around the icon) and remains focused even if another step is clicked. Similar behaviour can be observed on the Display Modes demo on the telerik site https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes/, if you remove the onChange handler for the Steps with icons Stepper and then change the value by clicking on a different stepper e.g. https://react-vbgv3y.stackblitz.io.

Please see attached for a screenshot. Is this intended behaviour? Is there any way to use the stepper without this focus behaviour given that in this use case it is for feedback only? Is there a different control that would be more suited for this purpose?

Kind regards,

David

Stepper

answered on 08 Dec 2021

1 answer

107 views

DropDownTree Height Problem

Hello,
The list seems too long because I have too many elements. How can I add a scroll to it

DropDownList

TreeList

TreeView

answered on 08 Dec 2021

1 answer

1.0K+ views

KendoReact Grid custom cell events

Hello, im using kendo react grid component with custom cells, i have onRowDoubleClick event attached to the grid and i need to add selection logic to this grid, when i attach selectionChange event on the custom cell via onClick

onRowDoubleClick no longer works, what should i do to have a grid with working onRowDoubleClick and onSelectionChange events on custom cells?

Grid

Wrappers for React

answered on 07 Dec 2021

1 answer

117 views

How to put a Form in the KendoDrawer

Hi Team,

How can I use the Drawer differently, other than to display a list of items, like a form or some other component?

I see how to remove the mini, and then I can control the expended prop with state, but how can i customize its content?

Thanks,
Grant

Drawer

answered on 07 Dec 2021

1 answer

848 views

Double click on grid row

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?

General Discussions

Grid

answered on 07 Dec 2021

1 answer

97 views

DrawerContainer displaying/hiding items

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,

Drawer

answered on 06 Dec 2021

1 answer

89 views

Area chart is shown wrongly, area is not being covered completely

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?

Charts

answered on 06 Dec 2021

1 answer

1.1K+ views

Typescript errors with KendoReact like error TS2430: Interface 'GridCellProps' incorrectly extends interface 'CellProps'.

I am using vite to build.

npm run build

This is what i get in the vs-code console.

> 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?

Grid

answered on 06 Dec 2021