Telerik Forums
KendoReact Forum
or
Ask question
All Questions
Unanswered
Answered
2,117 questions
0 answers
68 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
92 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
350 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
558 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
71 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
166 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
135 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
102 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
194 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
2 answers
1.4K+ views
How to sort date field in ascending order using sort feature of Kendo-React?

Hello,

I am trying to sort the date with sort feature inside the grid. But looks like it's not sorting for me based on the time also it's taking as a string.

If you let me how to perform sort on date column then that would be great!

I have added the screenshot and code snippet for the reference


const generateDate = () => {
  const currDate = new Date();
  const formatDateUS = currDate.toLocaleDateString("en-US");
  console.log(formatDateUS);
  return formatDateUS;
};


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