Hi, is it possible to make nested N hierarchy grid using kendo ui for react?

Can you provide any example?

Doesn't seem to work here - https://stackblitz.com/edit/react-m59yg9?file=app%2Fmain.jsx

I want the input text to be formatted as such: $2.22, but the input allows 3 decimal places and shows no currency symbol. I have added the formatting to the column and to the editCell component, but neither seem to do the trick. If I've done it incorrectly, can you show me the correct way to achieve what the NumericTextBox input here does with its currency example? Thank you!

Hi, I need to build a grid with single selection.

I started by the example on https://www.telerik.com/kendo-react-ui/components/grid/selection/

So, I noticed that if the grid has the single selection mode, when a row is selected I cannot unselect it: I can only select another row.

I would like to obtain this: when I click on a row it will be selected if is unselected, and it will be unselected if is selected.

This is my custom solution:

https://stackblitz.com/edit/react-mbwdnz?file=app%2Fmain.jsx

So, is there a better way to obtain the same?

Thank you

I have a requirement to add dynamic KendReact grid column  from a json file in an existing grid of one default column, say - ItemCode , on load the the grid should fill the below columns from json.

eg: - >

hey ive tried to disable the horizontal grid lines but couldnt make it work, also i couldnt find any place talking about how to round the lines of data, is it possible? (something like border-radius)

this is my chart code:

this is how it looks: ( i want to disable the vertical lines on the background)

wanted result: (with rounded edges)

I'm sorry for not being good at English.

Using the KendoUI React demo, I've encountered a weird issue with the bar charts. I gave each chart an interval of 3, 5, or 10 seconds, intending that each one refreshes by 3 seconds, 5 seconds, and 10 seconds. But when I turn on the dev mode and confirm it, the charts refresh together every second the other chart does.

FYI, This code is to be child components into a map of the parent component, so I cannot divide that component by each page. I hope to get a good answer to this situation.

pages/disk-index

import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';
import Disk from './disk';

export default function Home() {
    const intervalDisk = useRef(null);

    const diskData1 = [{ categoryField: 'root', value: 40, color: 'blue' }];

    const [diskData1State, setDiskData1State] = useState(diskData1);

    const isClient = typeof window === 'object';

    useEffect(() => {
        if (isClient) {
            intervalDisk.current = setInterval(() => {
                diskData1[0].value = Math.floor(Math.random() * 100);
                // console.log(new Date() + ', ' + diskData1[0].value);
                setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
            }, 10000);
            return () => clearInterval(intervalDisk.current);
        }
    }, []);

    return (
        <>
            <Disk diskId="1" interval="3000" />
            <Disk diskId="2" interval="5000" />
            <div id="diskDataId2">
                <Chart
                    style={{
                        width: '90%',
                        height: '85%',
                        position: 'center center',
                    }}
                >
                    <ChartTooltip />
                    <ChartSeries>
                        <ChartSeriesItem
                            type="bar"
                            stack={{
                                type: 'normal',
                            }}
                            gap={2}
                            spacing={0.35}
                            categoryField="categoryField"
                            colorField="color"
                            data={diskData1}
                            tooltip={true}
                        />
                    </ChartSeries>
                </Chart>
            </div>
        </>
    );
}

pages/disk

import { Chart, ChartTooltip, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';
import { useState, useEffect, useRef } from 'react';

export default function Disk(props) {
    console.log(JSON.stringify(props));

    const intervalDisk = useRef(null);

    const diskData1 = [{ categoryField: 'root', value: 40, color: 'red' }];

    const [diskData1State, setDiskData1State] = useState(diskData1);

    useEffect(() => {
        intervalDisk.current = setInterval(() => {
            diskData1[0].value = Math.floor(Math.random() * 100);
            // console.log(new Date() + ', ' + diskData1[0].value);
            setDiskData1State(JSON.parse(JSON.stringify(diskData1)));
        }, Number(props.interval));
        return () => clearInterval(intervalDisk.current);
    }, [diskData1State]);

    return (
        <>
            <div id={'diskData' + props.diskId}>
                <Chart
                    style={{
                        width: '90%',
                        height: '85%',
                        position: 'center center',
                    }}
                >
                    <ChartTooltip />
  

Is this a bug? https://www.telerik.com/kendo-react-ui/components/grid/rows/row-reordering/#toc-kendoreact-dragdrop

If you try to drag item 4 between 1 and 2, it takes position #1 (not as expected, it should take position #2). This only happens when dragging between #1 and #2 - if you drag above #1, the row becomes #1 (as expected).

Hello all,

I'm trying to implement a functionality which relies on Kendo Grid (React + Typescript) with selectable rows (with checkbox) as in the second example in the docs:

https://www.telerik.com/kendo-react-ui/components/grid/selection/

Is there any way (based on that example) to make the rows conditionally disabled? Say I click one of the rows which does two things:

• sets some filtering state (not a problem),
• based on this state I make it impossible to select another row. They should become disabled, and greyed out (struggling to achieve this)

What I tried to do was removing pointerEvents by setting them to none, but this one unfortunately also removed the tooltip that should be attached to each row explaining why it's been disabled.

I also tried to override Grid's onRowClick event by:

onRowClick={()=>{}}

Any help much appreciated,

Krzysztof