Telerik Forums
KendoReact Forum
or
Ask question
All Questions
Unanswered
Answered
2,259 questions
1 answer
578 views
Cancel Upload from OnBeforeUpload or disable Upload button
Upload Control.  I have autoupload set to false.  I'm reading the selected excel file in the OnAdd event to display a preview and allow them to map columns.  I want to be able to disable the Upload button if all the columns aren't mapped OR cancel the upload from OnBeforeUpload.  Is this possible?
Upload
Vessy
Telerik team
 answered on 18 Nov 2022
0 answers
240 views
Which component to use for Mega Menu?

Hi.

I'm planning to create a Mega Menu (or Jumbo Menu) as navigation on one of our apps like the one you use on your website (see attached screenshot). I was wondering if there is a Kendo UI component that I could use to create this. I found the Popup component but I'm not sure if this is the best one to use.

Any ideas would be appreciated.

Thanks,

Greetings,

Bernd

Popup
Bernd
Top achievements
Rank 5
Bronze
Bronze
Bronze
 asked on 18 Nov 2022
0 answers
155 views
React kendo-react-excel-export

On an Excel Export of a dynamically generated grid when the column type is url  (hyperlink) the excel export returns a blank column.  How do I convert this URL to string or pass an alternate value for that column. 

 

 <ExcelExport
                        data={exportData}
                        ref={exporter => {this._export = exporter; }}
                        fileName={`${exportFileName}.xlsx`}>
                               
                        {this._renderKendoGrid(tableData)}
                    </ExcelExport>
Excel Export
Grid
Jeremy
Top achievements
Rank 1
 asked on 17 Nov 2022
9 answers
840 views
Content flow in PDFExport using Flexbox

Im trying to generate a PDF using the PDFExport component but have run into an issue with the flow of the content. My document has two sections aligned using flexbox and displayed side by side. I want to be able to support multiple pages using the components auto-page break detection, however whenever the content of the section on the left (logically the first of the two sections in the DOM) overflows the first page, it forces the second section to the right of it onto its own page, leaving a large gap on the right side of the document where it should've been.

 

Since the content of these sections is dynamic, its isn't really feasible to manually set a page break, however I think the problem is more fundamental than that. My interpretation of this issue is that even though you may use something like flexbox or widths/floats to align content into multiple columns, when processed into a PDF, the component doesn't maintain those alignments in the multi-page scenario, but instead causes each column to be on its own page.

 

Is there something I can do to prevent this? Should I look into using the GridPDFExport component instead and just hack at the styling to remove the grid lines since I'm expecting a layout that's based around columns? If my example was unclear please let me know and I'll try to provide a more concrete one, thanks for any help

General Discussions
Grand Chef
Top achievements
Rank 1
Iron
 answered on 16 Nov 2022
0 answers
98 views
How to pass multiple functions name in component field?

Hello,

I want to pass multiple function name in the component, Kindly let me know how can I achieve this?

<Field
name={"Firstname"}
maxLength={firstNameMax}
value={firstname}
onChange={handleFirstName}
component={ContactDetails}
label={"First Name"}
validator={nameValidator}
/>
DropDownList
Input
Sachin
Top achievements
Rank 1
Iron
Iron
 updated question on 16 Nov 2022
1 answer
132 views
Calendar briefly appears/disappears after clicking on grid filter

I've just updated @progress/kendo-react-* to 5.0.0

I have a grid with a columnMenu and a filter of type 'date'.

filterOperators={{
   'date': [
       { text: 'grid.filterAfterOperator', operator: 'gt' },
       { text: 'grid.filterBeforeOperator', operator: 'lt' }
   ]
}}
...
<Column
   field="createdAt"
   title={formatMessage({id: 'date created'})}
   filter={'date'}
   cell={GridCellTooltip}
   columnMenu={ColumnMenu}
/>

As soon as I click the 'Toggle Calendar' button, I can briefly see the calendar appear, then it disappears and the entire filter dropdown menu disappears.

This is my package.json:

    "@progress/kendo-data-query": "1.6.0",
    "@progress/kendo-date-math": "1.5.9",
    "@progress/kendo-drawing": "1.17.1",
    "@progress/kendo-licensing": "1.2.1",
    "@progress/kendo-react-animation": "5.0.0",
    "@progress/kendo-react-buttons": "5.0.0",
    "@progress/kendo-react-charts": "5.0.0",
    "@progress/kendo-react-data-tools": "5.0.0",
    "@progress/kendo-react-dateinputs": "5.0.0",
    "@progress/kendo-react-dialogs": "5.0.0",
    "@progress/kendo-react-dropdowns": "5.0.0",
    "@progress/kendo-react-grid": "5.0.0",
    "@progress/kendo-react-inputs": "5.0.0",
    "@progress/kendo-react-intl": "5.0.0",
    "@progress/kendo-react-layout": "5.0.0",
    "@progress/kendo-react-popup": "5.0.0",
    "@progress/kendo-react-tooltip": "5.0.0",
    "@progress/kendo-react-treeview": "4.6.0",
    "@progress/kendo-react-upload": "5.0.0",
    "@progress/kendo-theme-default": "5.10.0",
Is there anything else I need to upgrade?
DatePicker
Filter 
Grid
Filip
Telerik team
 answered on 16 Nov 2022
0 answers
517 views
OnChange event not getting triggered when entering invalid date in DatePicker.
When I enter a date in invalid format (e.g. month/9/year or 11/day/year) manually and then try to clear it, the date doesn't get cleared out and onChange event is not getting called. Is there any way to clear out the invalid date from the date picker?
DatePicker
Soumita
Top achievements
Rank 1
 asked on 16 Nov 2022
1 answer
656 views
Change background color on onClick event - Kendo React

Hello, 

I need to change the background color on onClick event when I have a multiple donut chart and a bar chart on a page. When I click on BarChart it needs to be selected and the bgColor changes to grey similarly when I select DonutChart - BarChart bgcolor resets and donut charts changes to grey instead

onPlotArea event did not work on DonutChart

This is what I have tried so far : 

const [selected, setSelected] = useState(false);
  const handleClick = () => {
    setSelected(selected => !selected);
  };

 

 <Grid container direction={{ xs: 'row', sm: 'column' }}>
      <Grid item onClick={handleClick}>
        {data ? (
          <BarChart
             data={data}
              title={'title}
          ></BarChart>
        ) : null}
      </Grid>
      {data ? (
        <>
          <Grid item>
            <DonutChart
              data={data}
              title={'title}
            ></DonutChart>
          </Grid>) : null}
    </Grid>

 

 

Charts
Grid
Vessy
Telerik team
 answered on 15 Nov 2022
0 answers
86 views
Parts of Chart are not visible in Contrast Theme Test

Hi Sir(Madam):

I found that some parts of the chart are not visible in the high contrast mode of the window's system, could you tell me what can I do to fix this?

Thanks,
Steve

Charts
Styling / Themes
Steve
Top achievements
Rank 1
Iron
Iron
 asked on 10 Nov 2022
1 answer
261 views
using scripts only / cdn method

I am trying to use this as a front end only in NetSuite so I am using the CDN/script only method.

Can you check what's missing in my code as it is not working.

I have tried charts/scheduler/pivot/data grid

hopefully you can add sample codes in the documentation for CDN / Scripts only method.

here is my code:

Charts:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>KendoReact</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script>
        KendoLicensing.setScriptKey(
            'censored'
        );
    </script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
</head>

<body>
    <my-app>
        <span class="k-icon k-i-loading"></span>
    </my-app>
</body>
<script type="text/babel">
    const categories = [2002, 2003, 2004];
        const series = [
            {
                name: "India",
                data: [3.907, 7.943, 7.848],
            },
            {
                name: "Russian Federation",
                data: [4.743, 7.295, 7.175],
            },
            {
                name: "Germany",
                data: [0.21, 0.375, 1.161],
            },
            {
                name: "World",
                data: [1.988, 2.733, 3.994],
            },
        ];
        const areaData = [
            {
                name: "World",
                data: [3.988, 3.733, 3.994],
            },
            {
                name: "Germany",
                data: [2.21, 2.375, 2.161],
            },
            {
                name: "Russian Federation",
                data: [1.743, 1.295, 1.175],
            },
            {
                name: "India",
                data: [0.907, 0.943, 0.848],
            },
        ];
        const pieData = [
            {
                name: "India",
                share: 0.24,
            },
            {
                name: "Russian Federation",
                share: 0.26,
                explode: true,
            },
            {
                name: "Germany",
                share: 0.1,
            },
            {
                name: "World",
                share: 0.4,
            },
        ];
        const ChartContainer = () => (
            <>
                <div className="row mb-3">
                    <div className="col-6">
                        <div className="k-card">
                            <Chart
                                style={{
                                    height: 350,
                                }}
                            >
                                <ChartTitle text="Column Chart" />
                                <ChartLegend position="top" orientation="horizontal" />
                                <ChartCategoryAxis>
                                    <ChartCategoryAxisItem categories={categories} startAngle={45} />
                                </ChartCategoryAxis>
                                <ChartSeries>
                                    {series.map((item, idx) => (
                                        <ChartSeriesItem
                                            key={idx}
                                            type="column"
                                            tooltip={{
                                                visible: true,
                                            }}
                                            data={item.data}
                                            name={item.name}
                                        />
                                    ))}
                                </ChartSeries>
                            </Chart>
                        </div>
                    </div>
                    <div className="col-6">
                        <div className="k-card">
                            <Chart
                                style={{
                                    height: 350,
                                }}
                            >
                                <ChartTitle text="Line Chart" />
                                <ChartLegend position="top" orientation="horizontal" />
                                <ChartCategoryAxis>
                                    <ChartCategoryAxisItem categories={categories} startAngle={45} />
                                </ChartCategoryAxis>
                                <ChartSeries>
                                    {series.map((item, idx) => (
                                        <ChartSeriesItem
                                            key={idx}
                                            type="line"
                                            tooltip={{
                                                visible: true,
                                            }}
                                            data={item.data}
                                            name={item.name}
                                        />
                                    ))}
                                </ChartSeries>
                            </Chart>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-6">
                        <div className="k-card">
                            <Chart
                                style={{
                                    height: 350,
                                }}
                            >
                                <ChartTitle text="Area Chart" />
                                <ChartLegend position="top" orientation="horizontal" />
                                <ChartCategoryAxis>
                                    <ChartCategoryAxisItem categories={categories} startAngle={45} />
                                </ChartCategoryAxis>
                                <ChartSeries>
                                    {areaData.map((item, idx) => (
                                        <ChartSeriesItem
                                            key={idx}
                                            type="area"
                                            tooltip={{
                                                visible: true,
                                            }}
                                            data={item.data}
                                            name={item.name}
                                        />
                                    ))}
                                </ChartSeries>
                            </Chart>
                        </div>
                    </div>
                    <div className="col-6">
                        <div className="k-card">
                            <Chart
                                style={{
                                    height: 350,
                                }}
                            >
                                <ChartTitle text="Pie Chart" />
                                <ChartLegend position="top" orientation="horizontal" />
                                <ChartSeries>
                                    <ChartSeriesItem
                                        type="pie"
                                        overlay={{
                                            gradient: "sharpBevel",
                                        }}
                                        tooltip={{
                                            visible: true,
                                        }}
                                        data={pieData}
                                        categoryField="name"
                                        field="share"
                                    />
                                </ChartSeries>
                            </Chart>
                        </div>
                    </div>
                </div>
            </>
        );
    ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));

</script>

</html>

 

Scheduler:


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>KendoReact</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script>
        KendoLicensing.setScriptKey(
            'censored'
        );
    </script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
</head>

<body>
    <my-app>
        <span class="k-icon k-i-loading"></span>
    </my-app>
</body>
<script type="text/babel">
    const baseData = [{
            "TaskID": 4,
            "OwnerID": 2,
            "Title": "Bowling tournament",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-09T21:00:00.000Z",
            "End": "2013-06-10T00:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 5,
            "OwnerID": 2,
            "Title": "Take the dog to the vet",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-10T07:00:00.000Z",
            "End": "2013-06-10T08:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 6,
            "OwnerID": 2,
            "Title": "Call Charlie about the project",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-11T11:30:00.000Z",
            "End": "2013-06-11T13:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 7,
            "OwnerID": 3,
            "Title": "Meeting with Alex",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-12T11:00:00.000Z",
            "End": "2013-06-12T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 9,
            "OwnerID": 2,
            "Title": "Alex's Birthday",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-14T02:00:00.000Z",
            "End": "2013-06-14T02:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 12,
            "OwnerID": 2,
            "Title": "Car Service",
            "RoomID": 1,
            "Description": "Might come to work later!",
            "StartTimezone": null,
            "Start": "2013-06-24T08:30:00.000Z",
            "End": "2013-06-24T10:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 14,
            "OwnerID": 3,
            "RoomID": 2,
            "PersonID": 3,
            "Title": "Replace the printer on the 1st floor",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T10:00:00.000Z",
            "End": "2013-06-24T11:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 15,
            "OwnerID": 1,
            "Title": "Attending HR Conference",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T00:00:00.000Z",
            "End": "2013-06-26T00:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 16,
            "OwnerID": 1,
            "Title": "Business Lunch with Gregory Watkins",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T12:00:00.000Z",
            "End": "2013-06-25T13:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 17,
            "OwnerID": 1,
            "Title": "Breakfast with CFO and COO",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T08:30:00.000Z",
            "End": "2013-06-27T09:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 18,
            "OwnerID": 1,
            "Title": "Job Interview - Mathew Stevens",
            "Description": "Junior Researcher",
            "StartTimezone": null,
            "Start": "2013-06-27T10:00:00.000Z",
            "End": "2013-06-27T11:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 19,
            "OwnerID": 1,
            "Title": "Review CVs with Tim",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T11:00:00.000Z",
            "End": "2013-06-27T11:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 20,
            "OwnerID": 1,
            "Title": "Lunch with Monica",
            "Description": "Discuss the Employee handbook",
            "StartTimezone": null,
            "Start": "2013-06-27T12:00:00.000Z",
            "End": "2013-06-27T13:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 21,
            "OwnerID": 1,
            "Title": "Job Interview - John Stewart",
            "Description": "Accountant",
            "StartTimezone": null,
            "Start": "2013-06-27T14:00:00.000Z",
            "End": "2013-06-27T15:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 22,
            "OwnerID": 1,
            "Title": "Job Interview - Mary Smith",
            "Description": "Accountant",
            "StartTimezone": null,
            "Start": "2013-06-27T15:30:00.000Z",
            "End": "2013-06-27T16:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 24,
            "OwnerID": 3,
            "Title": "Register new Access Cards",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T12:00:00.000Z",
            "End": "2013-06-24T12:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 25,
            "OwnerID": 1,
            "Title": "HR Lecture",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-04T19:00:00.000Z",
            "End": "2013-06-04T21:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "FREQ=WEEKLY;BYDAY=TU,TH",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 26,
            "OwnerID": 1,
            "Title": "Dentist",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-28T08:00:00.000Z",
            "End": "2013-06-28T09:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 27,
            "OwnerID": 1,
            "Title": "Job Interview - Laura Bailey",
            "Description": "Helpdesk",
            "StartTimezone": null,
            "Start": "2013-06-28T09:30:00.000Z",
            "End": "2013-06-28T10:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 28,
            "OwnerID": 1,
            "Title": "Job Interview - Jenny Baxter",
            "Description": "Helpdesk",
            "StartTimezone": null,
            "Start": "2013-06-28T11:00:00.000Z",
            "End": "2013-06-28T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 31,
            "OwnerID": 1,
            "Title": "Team building prep tasks",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-28T14:00:00.000Z",
            "End": "2013-06-28T17:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 32,
            "OwnerID": 2,
            "RoomID": 2,
            "Title": "Job Interview - Bernard Atkins",
            "Description": "Helpdesk",
            "StartTimezone": null,
            "Start": "2013-06-24T13:30:00.000Z",
            "End": "2013-06-24T14:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 34,
            "OwnerID": 1,
            "Title": "Review Job Applications",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T15:00:00.000Z",
            "End": "2013-06-24T17:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 35,
            "OwnerID": 1,
            "Title": "Grand Canyon tour",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-23T00:00:00.000Z",
            "End": "2013-06-23T00:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 40,
            "OwnerID": 3,
            "Title": "Install new laptops in conference rooms",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T13:30:00.000Z",
            "End": "2013-06-24T15:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 66,
            "OwnerID": 3,
            "Title": "Bob's Birthday",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-29T08:00:00.000Z",
            "End": "2013-06-29T06:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 68,
            "OwnerID": 1,
            "RoomID": 2,
            "Title": "Breakfast with Tom",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T09:45:00.000Z",
            "End": "2013-06-24T11:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 69,
            "OwnerID": 2,
            "Title": "Team planning meeting",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T10:00:00.000Z",
            "End": "2013-06-24T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 70,
            "OwnerID": 2,
            "Title": "Support Phone Call",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-24T16:00:00.000Z",
            "End": "2013-06-24T16:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 71,
            "OwnerID": 2,
            "Title": "Business breakfast with Caroline",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T09:00:00.000Z",
            "End": "2013-06-25T10:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 72,
            "OwnerID": 2,
            "Title": "Discuss preojects' deadlines",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T11:00:00.000Z",
            "End": "2013-06-25T11:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 73,
            "OwnerID": 2,
            "Title": "Support Meeting",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T15:00:00.000Z",
            "End": "2013-06-25T16:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 74,
            "OwnerID": 2,
            "Title": "Dine with Mathew",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T18:30:00.000Z",
            "End": "2013-06-25T20:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 79,
            "OwnerID": 2,
            "Title": "Banking",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-26T09:00:00.000Z",
            "End": "2013-06-26T10:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 80,
            "OwnerID": 3,
            "Title": "Software updates",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T10:00:00.000Z",
            "End": "2013-06-25T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 81,
            "OwnerID": 3,
            "Title": "UPS maintenance",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-25T16:30:00.000Z",
            "End": "2013-06-25T18:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 82,
            "OwnerID": 2,
            "Title": "Support Call",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-26T11:30:00.000Z",
            "End": "2013-06-26T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 83,
            "OwnerID": 3,
            "Title": "Phone Sync with NY office ",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-26T13:30:00.000Z",
            "End": "2013-06-26T14:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 84,
            "OwnerID": 3,
            "Title": "Phone Sync with Boston Office",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-26T15:00:00.000Z",
            "End": "2013-06-26T16:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 85,
            "OwnerID": 3,
            "Title": "Server maintenance",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-26T18:30:00.000Z",
            "End": "2013-06-26T21:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": true
        }, {
            "TaskID": 86,
            "OwnerID": 2,
            "Title": "Status meeting",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-28T13:30:00.000Z",
            "End": "2013-06-28T15:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 87,
            "OwnerID": 3,
            "Title": "Helpdesk status meeting",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T10:30:00.000Z",
            "End": "2013-06-27T11:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 88,
            "OwnerID": 2,
            "Title": "Business Lunch",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T12:00:00.000Z",
            "End": "2013-06-27T13:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 89,
            "OwnerID": 3,
            "Title": "Employee database update",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T14:00:00.000Z",
            "End": "2013-06-27T15:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 90,
            "OwnerID": 3,
            "Title": "Website upload",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T07:30:00.000Z",
            "End": "2013-06-27T08:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 91,
            "OwnerID": 2,
            "Title": "Meeting with marketing guys",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-27T17:00:00.000Z",
            "End": "2013-06-27T18:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 92,
            "OwnerID": 3,
            "Title": "Meeting with Internet provider",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-28T10:30:00.000Z",
            "End": "2013-06-28T11:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 93,
            "OwnerID": 3,
            "Title": "Bob's Birthday Party",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-29T20:00:00.000Z",
            "End": "2013-06-29T23:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": null,
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 95,
            "OwnerID": 2,
            "Title": "Dance Practice",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-03T18:30:00.000Z",
            "End": "2013-06-03T20:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "FREQ=WEEKLY;BYDAY=MO,WE",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 114,
            "OwnerID": 3,
            "Title": "Software updates",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-04T09:00:00.000Z",
            "End": "2013-06-04T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 115,
            "OwnerID": 1,
            "Title": "Breakfast at Starbucks",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-04T08:00:00.000Z",
            "End": "2013-06-04T09:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 116,
            "OwnerID": 2,
            "Title": "Performance review",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-04T14:00:00.000Z",
            "End": "2013-06-04T17:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 118,
            "OwnerID": 1,
            "Title": "HR seminar preparation",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-05T10:00:00.000Z",
            "End": "2013-06-05T12:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 119,
            "OwnerID": 3,
            "Title": "Helpdesk weekly meeting",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-05T15:00:00.000Z",
            "End": "2013-06-05T16:00:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "FREQ=WEEKLY;BYDAY=WE",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }, {
            "TaskID": 120,
            "OwnerID": 3,
            "Title": "Website upload",
            "Description": "",
            "StartTimezone": null,
            "Start": "2013-06-07T07:00:00.000Z",
            "End": "2013-06-07T08:30:00.000Z",
            "EndTimezone": null,
            "RecurrenceRule": "",
            "RecurrenceID": null,
            "RecurrenceException": null,
            "isAllDay": false
        }];
        const customModelFields = {
            id: 'TaskID',
            title: 'Title',
            description: 'Description',
            start: 'Start',
            end: 'End',
            recurrenceRule: 'RecurrenceRule',
            recurrenceId: 'RecurrenceID',
            recurrenceExceptions: 'RecurrenceException'
        };
        const currentYear = new Date().getFullYear();
        const parseAdjust = eventDate => {
            const date = new Date(eventDate);
            date.setFullYear(currentYear);
            return date;
        };
        const randomInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
        const displayDate = new Date(Date.UTC(currentYear, 5, 24));
        const sampleData = baseData.map(dataItem => ({
            id: dataItem.TaskID,
            start: parseAdjust(dataItem.Start),
            startTimezone: dataItem.startTimezone,
            end: parseAdjust(dataItem.End),
            endTimezone: dataItem.endTimezone,
            isAllDay: dataItem.isAllDay,
            title: dataItem.Title,
            description: dataItem.Description,
            recurrenceRule: dataItem.RecurrenceRule,
            recurrenceId: dataItem.RecurrenceID,
            recurrenceExceptions: dataItem.RecurrenceException,
            roomId: dataItem.RoomID,
            ownerID: dataItem.OwnerID,
            personId: dataItem.OwnerID
        }));
        const sampleDataWithResources = baseData.map(dataItem => ({
            id: dataItem.TaskID,
            start: parseAdjust(dataItem.Start),
            startTimezone: dataItem.startTimezone,
            end: parseAdjust(dataItem.End),
            endTimezone: dataItem.endTimezone,
            isAllDay: dataItem.isAllDay,
            title: dataItem.Title,
            description: dataItem.Description,
            recurrenceRule: dataItem.RecurrenceRule,
            recurrenceId: dataItem.RecurrenceID,
            recurrenceExceptions: dataItem.RecurrenceException,
            roomId: randomInt(1, 2),
            personId: randomInt(1, 2)
        }));
        const sampleDataWithCustomSchema = baseData.map(dataItem => ({
            ...dataItem,
            Start: parseAdjust(dataItem.Start),
            End: parseAdjust(dataItem.End),
            PersonIDs: randomInt(1, 2),
            RoomID: randomInt(1, 2)
        }));
       
   const App = () => {
        const timezones = React.useMemo(() => timezoneNames(), []);
        const locales = [{
            language: 'en-US',
            locale: 'en'
        }, {
            language: 'es-ES',
            locale: 'es'
        }];
        const [view, setView] = React.useState('day');
        const [date, setDate] = React.useState(displayDate);
        const [locale, setLocale] = React.useState(locales[0]);
        const [timezone, setTimezone] = React.useState('Etc/UTC');
        const [orientation, setOrientation] = React.useState('horizontal');
        const [data, setData] = React.useState(sampleDataWithCustomSchema);
        const handleViewChange = React.useCallback(event => {
            setView(event.value);
        }, [setView]);
        const handleDateChange = React.useCallback(event => {
            setDate(event.value);
        }, [setDate]);
        const handleLocaleChange = React.useCallback(event => {
            setLocale(event.target.value);
        }, [setLocale]);
        const handleTimezoneChange = React.useCallback(event => {
            setTimezone(event.target.value);
        }, [setTimezone]);
        const handleOrientationChange = React.useCallback(event => {
            setOrientation(event.target.getAttribute('data-orientation'));
        }, []);
        const handleDataChange = React.useCallback(({
            created,
            updated,
            deleted
        }) => {
            setData(old => old.filter(item => deleted.find(current => current.TaskID === item.TaskID) === undefined).map(item => updated.find(current => current.TaskID === item.TaskID) || item).concat(created.map(item => Object.assign({}, item, {
                TaskID: guid()
            }))));
        }, [setData]);
        return <div>
            <div className="example-config">
                <div className="row">
                    <div className="col">
                        <h5>Timezone:</h5>
                        <DropDownList value={timezone} onChange={handleTimezoneChange} data={timezones} />
                    </div>
                    <div className="col">
                        <h5>Locale:</h5>
                        <DropDownList value={locale} onChange={handleLocaleChange} data={locales} textField="language" dataItemKey="locale" />
                    </div>
                    <div className="col">
                        <h5>Orientation:</h5>
                        <input type="radio" name="orientation" id="horizontal" data-orientation="horizontal" className="k-radio k-radio-md" checked={orientation === 'horizontal'} onChange={handleOrientationChange} />
                        <label className="k-radio-label" htmlFor="horizontal">Horizontal</label>
                        <br />
                        <input type="radio" name="orientation" id="vertical" data-orientation="vertical" className="k-radio k-radio-md" checked={orientation === 'vertical'} onChange={handleOrientationChange} />
                        <label className="k-radio-label" htmlFor="vertical">Vertical</label>
                    </div>
                </div>
            </div>
            <LocalizationProvider language={locale.language}>
                <IntlProvider locale={locale.locale}>
                    <Scheduler data={data} onDataChange={handleDataChange} view={view} onViewChange={handleViewChange} date={date} onDateChange={handleDateChange} editable={true} timezone={timezone} modelFields={customModelFields} group={{
                        resources: ['Rooms', 'Persons'],
                        orientation
                    }} resources={[{
                        name: 'Rooms',
                        data: [{
                            text: 'Meeting Room 101',
                            value: 1
                        }, {
                            text: 'Meeting Room 201',
                            value: 2,
                            color: '#FF7272'
                        }],
                        field: 'RoomID',
                        valueField: 'value',
                        textField: 'text',
                        colorField: 'color'
                    }, {
                        name: 'Persons',
                        data: [{
                            text: 'Peter',
                            value: 1,
                            color: '#5392E4'
                        }, {
                            text: 'Alex',
                            value: 2,
                            color: '#54677B'
                        }],
                        field: 'PersonIDs',
                        valueField: 'value',
                        textField: 'text',
                        colorField: 'color'
                    }]}>
                        <TimelineView />
                        <DayView />
                        <WeekView />
                        <MonthView />
                        <AgendaView />
                    </Scheduler>
                </IntlProvider>
            </LocalizationProvider>
        </div>;
    };
    ReactDOM.render(<App />, document.querySelector('my-app'));

</script>

</html>

PivotGrid:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>KendoReact</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script>
        KendoLicensing.setScriptKey(
            'censored'
        );
    </script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
</head>

<body>
    <my-app>
        <span class="k-icon k-i-loading"></span>
    </my-app>
</body>
<script type="text/babel">
    const WideColumn = React.forwardRef(props => {
            return <PivotGridColumn {...props} style={{
                width: 200
            }} />;
        });

   const defaultColumnAxes = [{
        name: ['[Date].[Calendar]'],
        expand: true
    }, {
        name: ['[Product].[Category]']
    }];
    const defaultRowAxes = [{
        name: ['[Geography].[City]']
    }];
    const defaultMeasureAxes = [{
        name: ['[Measures].[Reseller Freight Cost]']
    }];
    const catalog = 'Adventure Works DW 2008R2';
    const cube = 'Adventure Works';
    const url = 'https://demos.telerik.com/olap/msmdpump.dll';
    const App = () => {
        const [show, setShow] = React.useState(false);
        const {
            pivotProps,
            configuratorProps,
            state
        } = usePivotOLAPService({
            catalog,
            cube,
            url,
            defaultRowAxes,
            defaultColumnAxes,
            defaultMeasureAxes
        });
        const handleButtonClick = React.useCallback(() => {
            setShow(!show);
        }, [show]);
        return <PivotGridContainer>
            <PivotGrid {...pivotProps} style={{
                height: 700
            }} column={WideColumn} />
            {show && <PivotGridConfigurator {...configuratorProps} />}
            <PivotGridConfiguratorButton onClick={handleButtonClick} />
            {state.loading && <Loader style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%,-50%)'
            }} size="large" type={'converging-spinner'} />}
        </PivotGridContainer>;
    };
    ReactDOM.render(<App />, document.querySelector('my-app'));

</script>

</html>

datagrid:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>KendoReact</title>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
    <script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
    <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
    <script>
        KendoLicensing.setScriptKey(
            'censored' 
        );
    </script>
    <script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"></link>
</head>

<body>
    <my-app>
        <span class="k-icon k-i-loading"></span>
    </my-app>
</body>
<script type="text/babel">
 const DATE_FORMAT = 'yyyy-mm-dd hh:mm:ss.SSS';
    const intl = new IntlService('en');
    orders.forEach(o => {
        o.orderDate = intl.parseDate(o.orderDate ? o.orderDate : '20/20/2020', DATE_FORMAT);
        o.shippedDate = o.shippedDate ? undefined : intl.parseDate(o.shippedDate ? o.orderDate.toString() : '20/20/2020', DATE_FORMAT);
    });
    const DetailComponent = props => {
        const dataItem = props.dataItem;
        return <div>
            <section style={{
                width: "200px",
                float: "left"
            }}>
                <p><strong>Street:</strong> {dataItem.shipAddress.street}</p>
                <p><strong>City:</strong> {dataItem.shipAddress.city}</p>
                <p><strong>Country:</strong> {dataItem.shipAddress.country}</p>
                <p><strong>Postal Code:</strong> {dataItem.shipAddress.postalCode}</p>
            </section>
            <Grid style={{
                width: "500px"
            }} data={dataItem.details} />
        </div>;
    };
    const App = () => {
        const locales = [{
            language: 'en-US',
            locale: 'en'
        }, {
            language: 'es-ES',
            locale: 'es'
        }];
        const [dataState, setDataState] = React.useState({
            skip: 0,
            take: 20,
            sort: [{
                field: 'orderDate',
                dir: 'desc'
            }],
            group: [{
                field: 'customerID'
            }]
        });
        const [currentLocale, setCurrentLocale] = React.useState(locales[0]);
        const [dataResult, setDataResult] = React.useState(process(orders, dataState));
        const dataStateChange = event => {
            setDataResult(process(orders, event.dataState));
            setDataState(event.dataState);
        };
        const expandChange = event => {
            const isExpanded = event.dataItem.expanded === undefined ? event.dataItem.aggregates : event.dataItem.expanded;
            event.dataItem.expanded = !isExpanded;
            setDataResult({
                ...dataResult
            });
        };
        let _pdfExport;
        const exportExcel = () => {
            _export.save();
        };
        let _export;
        const exportPDF = () => {
            _pdfExport.save();
        };
        return <LocalizationProvider language={currentLocale.language}>
            <IntlProvider locale={currentLocale.locale}>
                <div>
                    <ExcelExport data={orders} ref={exporter => {
                        _export = exporter;
                    }}>
                        <Grid style={{
                            height: '700px'
                        }} sortable={true} filterable={true} groupable={true} reorderable={true} pageable={{
                            buttonCount: 4,
                            pageSizes: true
                        }} data={dataResult} {...dataState} onDataStateChange={dataStateChange} detail={DetailComponent} expandField="expanded" onExpandChange={expandChange}>
                            <GridToolbar>
                                Locale:&nbsp;&nbsp;&nbsp;
                                <DropDownList value={currentLocale} textField="language" onChange={e => {
                                    setCurrentLocale(e.target.value);
                                }} data={locales} />&nbsp;&nbsp;&nbsp;
                                <button title="Export to Excel" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={exportExcel}>
                                    Export to Excel
                                </button>&nbsp;
                                <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={exportPDF}>Export to PDF</button>
                            </GridToolbar>
                            <GridColumn field="customerID" width="200px" />
                            <GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
                            <GridColumn field="shipName" width="280px" />
                            <GridColumn field="freight" filter="numeric" width="200px" />
                            <GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
                            <GridColumn field="employeeID" filter="numeric" width="200px" />
                            <GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
                        </Grid>
                    </ExcelExport>
                    <GridPDFExport ref={element => {
                        _pdfExport = element;
                    }} margin="1cm">
                        {<Grid data={process(orders, {
                            skip: dataState.skip,
                            take: dataState.take
                        })}>
                            <GridColumn field="customerID" width="200px" />
                            <GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
                            <GridColumn field="shipName" width="280px" />
                            <GridColumn field="freight" filter="numeric" width="200px" />
                            <GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
                            <GridColumn field="employeeID" filter="numeric" width="200px" />
                            <GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
                        </Grid>}
                    </GridPDFExport>
                </div>
            </IntlProvider>
        </LocalizationProvider>;
    };
    ReactDOM.render(<App />, document.querySelector('my-app'));

</script>

</html>

Charts
Grid
Scheduler
Vessy
Telerik team
 answered on 09 Nov 2022
Narrow your results
Done
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Styling / Themes
DatePicker
Editor
TreeList
PDF Processing
Styling
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drawer
Button
Drag and Drop
MultiSelect
Accessibility
NumericTextBox
Tooltip
Checkbox
Menu
Gantt
DateTimePicker
Popup
AutoComplete
DateInput
Window
Sortable
PDF Viewer
Data Query
Drawing
Licensing
Calendar
Pager 
TabStrip
Labels 
Localization
TimePicker
GridLayout
FontIcon
Animation
PanelBar
PivotGrid
Card
DropDownButton
Conversational UI 
DateRangePicker
Splitter
Badge 
Security
Slider
Spreadsheet
MultiViewCalendar
Stepper
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Switch
TextArea
Toolbar
TaskBoard
DropDownTree
MultiColumnComboBox
MultiSelectTree
ContextMenu
TileLayout
Map
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
Loader
ExpansionPanel
SvgIcon
Typography
ProgressBar
ScrollView
Popover
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
AI Coding Assistant
Chat
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
InlineAIPrompt
SpeechToTextButton
Chart Wizard
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Learn how
85 86
87
88 89
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how