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

Hi all,

I'm importing Kendo's Editor into a fresh react project and styling with default theme. There is a large white space area at the top of the editor content area that I cannot get rid of. Any idea what's causing this?

App created using npx create-react-app.

Editor: 5.3.0

Kendo-theme-default: 5.5.0

import '@progress/kendo-theme-default/dist/all.css';
import { Editor, EditorTools } from "@progress/kendo-react-editor";
const {
  Bold,
  Italic,
  Underline,
  AlignLeft,
  AlignRight,
  AlignCenter,
  Indent,
  Outdent,
  OrderedList,
  UnorderedList,
  Undo,
  Redo,
  Link,
  Unlink,
} = EditorTools;

const content = `<p>The KendoReact Editor allows your users to edit HTML in a familiar, user-friendly way.<br />The Editor provides the core HTML editing engine, which includes text formatting, hyperlinks, and lists. The component <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards, and provides API for content manipulation.</p><p>Features include:</p><ul><li><p>Text formatting</p></li><li><p>Bulleted and numbered lists</p></li><li><p>Hyperlinks</p></li><li><p>Cross-browser support</p></li><li><p>Identical HTML output across browsers</p></li></ul>`;

const App = () => {
  return (
    <Editor
      tools={[
        [Bold, Italic, Underline],
        [Undo, Redo],
        [Link, Unlink],
        [AlignLeft, AlignCenter, AlignRight],
        [OrderedList, UnorderedList, Indent, Outdent],
      ]}
      contentStyle={{
        height: 320,
      }}
      defaultContent={content}
    />
  );
};

export default App;

I have a function where I need to merge variables in to a document preferably in docx format and then place a PDF document as a background in to the document.  Can PDF Processing do this?

Thank you.

Hi, I tried to use a RadioButton inside a telerik Form component but it seems not working.

I started from the example on

https://www.telerik.com/kendo-react-ui/components/form/get-started/

And I added a checkbox (it works fine) and 3 radiobutton, but it is not clear for me how use them: they doesn't load initial values and not falls on the submit json.

This is my example:

https://stackblitz.com/edit/react-oxhaws?file=src%2FApp.js

Are there some example on this case?