Telerik Forums
KendoReact Forum
or
Ask question
All Questions
Unanswered
Answered
2,303 questions
0 answers
593 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
712 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
133 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
306 views
[Solved] 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
226 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
203 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
384 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.7K+ 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
0 answers
1.3K+ views
How to apply Search Bar with Filter for my Kendo React Grid Component?

Hello,

I need to apply Search Bar with Filter for my Kendo React Grid Component. Kindly let me know if you have any reference/example for it.

I searched but I didn't get in kendo react!

I need very similar to this. 

Here is the link: https://dojo.telerik.com/ErISoxIz

Best,

Sachin.

Filter 
Grid
TreeList
Sachin
Top achievements
Rank 1
Iron
Iron
 asked on 07 Nov 2022
1 answer
366 views
[Solved] Disable Total Column+Row in KendoReact PivotGrid

Is this possible? I only want to use the PivotGrid to display information without any need for aggregation. I've gotten the example grid to look mostly how I want, but the total column and row are impossible to remove without breaking the compiler: https://codesandbox.io/s/sharp-breeze-05feiz?file=/app/main.jsx

Thank you!

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