Telerik Forums
KendoReact Forum
or
Ask question
All Questions
Unanswered
Answered
2,227 questions
9 answers
818 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
88 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
128 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
484 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
640 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
84 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
240 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
1 answer
175 views
How to conditional visible ChartSeriesLabels in KendoUI react?
How to show chart label with conditional checking series item value. Show only value > 0 
const seriesData = [10, 0, 50, 30, 0, 19];
const ChartContainer = () => (
 <Chart>
    <ChartSeries>
      <ChartSeriesItem type="column" data={seriesData}>
        <ChartSeriesLabels visible={true} position={"center"} />
      </ChartSeriesItem>
    </ChartSeries>
  </Chart>
);
 
Charts
Konstantin Dikov
Telerik team
 answered on 09 Nov 2022
1 answer
134 views
How to alternate colors of ListBox items

Hi Team, 

In the ListView widget one can customize the item rendered, and alternate the styles based on the item index. The index is not exposed for the ListBox Item. Was this by design, if so Why? And how do I alternate styles for ListBox items then?

Thanks,
Grant

PS. "ListBox" is not accepted as a tag for this question

ListView
Konstantin Dikov
Telerik team
 answered on 08 Nov 2022
0 answers
270 views
Show Donut Chart when value is null

I currently have a donut chart with Value 0. The legend is showing up as normal but the chart is not being displayed. 

Is there a way to display the chart as greyed out with 0 as series value ?

 

const standardChartData: ChartData[] = [
  {
    label: 'Legend 1',
    value: 0
  },
  {
    label: 'Legend 2',
    value: 0
  },
  {
    label: 'Legend 3',
    value: 1 

}
];

           

 <ChartSeries>      

                <ChartSeriesItem

                  type="donut"
                  data={data}                  
                  categoryField="label"
                  autoFit={true}
                  field="value"
                >
                  <ChartSeriesItemTooltip
                    visible={true}
                    render={renderTooltip}
                  ></ChartSeriesItemTooltip>
                  <ChartSeriesLabels
                    color={theme.palette.common.black}
                    background="none"
                    font={chartSeriesFont}
                  />
                </ChartSeriesItem>
              </ChartSeries>

 <ChartLegend
              position="custom"
              offsetX={2}
              offsetY={2}
              visible={true}
              labels={{
                font: chartLegendFont
              }}
              height={100}
            />

 

Charts
User
Top achievements
Rank 1
 asked on 07 Nov 2022
Narrow your results
Done
Selected tags
Tags
General Discussions
Grid
Wrappers for React
Charts
Scheduler
Filter 
DropDownList
Form
Editor
Styling / Themes
DatePicker
TreeList
PDF Processing
Styling
ComboBox
Excel Export
Dialog
Input
TreeView
Upload
Drag and Drop
Drawer
Button
MultiSelect
Accessibility
NumericTextBox
Tooltip
Checkbox
Menu
DateTimePicker
Popup
AutoComplete
Gantt
Window
DateInput
Sortable
PDF Viewer
Data Query
Drawing
Licensing
Calendar
Pager 
TabStrip
Localization
TimePicker
Labels 
FontIcon
GridLayout
Animation
Card
PanelBar
DropDownButton
PivotGrid
Conversational UI 
DateRangePicker
Splitter
Badge 
Slider
Spreadsheet
MultiViewCalendar
Security
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
ExpansionPanel
SvgIcon
Typography
ProgressBar
StockChart
RadialGauge
Server Components
AIPrompt
Page Templates / Building Blocks
ColorGradient
ColorPalette
ColorPicker
Notification
Ripple
Loader
Skeleton
ButtonGroup
Chip
ChipList
FloatingActionButton
SplitButton
ActionSheet
Barcode
QR Code
FlatColorPicker
Signature
BottomNavigation
BreadCrumb
StackLayout
Timeline
ListBox
ChunkProgressBar
ScrollView
Popover
Sparkline
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
VS Code Extension
AI Coding Assistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
82 83
84
85 86
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how