Telerik Forums
KendoReact Forum
or
Ask question
All Questions
Unanswered
Answered
4 questions
1 answer
449 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
1 answer
130 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
251 views
How to disable chart vertical lines and how to make the lines rounded?

hey ive tried to disable the horizontal grid lines but couldnt make it work, also i couldnt find any place talking about how to round the lines of data, is it possible? (something like border-radius)

this is my chart code:

this is how it looks: ( i want to disable the vertical lines on the background)

wanted result: (with rounded edges)

Charts
Grid
Styling
Styling / Themes
Vessy
Telerik team
 answered on 23 Jun 2022
1 answer
52 views
How to render data using javascript and kendo?

Hi, I am new here..

 

I am having trouble on how or what is the best way to render data on _HTML, can anyone help me on this problem?

 

 

this is the current code:

 


Report = (() => {
    let attendance = "";
    const init = async ()=> {
      _HTML.onload();
      _BIND.onload();
    };
    const _HTML = {
      onload : ()=>{
          _UI.renderReport();
      },
      renderReport: () => {
        $("$chart").kendoChart({
          ....
        series:[{
          name: "Total Persons",
          data: counts //dont know why not working
         }]
        ...,
        categoryAxis:{
         categories: parents, //dont know why not working
        }
        ...,
        });
        attendance = $("renderReport").data("kendoChart");
      };
    }
    const _BIND = {
        onload: async () => {
            const _ = _DATA;
            const {parents, counts} = await _.getParents();
            console.log(parents, counts)
            attendance.setDataSource({parents, counts})
            
        }
    }
 })

// the result of console.log(parents, counts) are

 


{
    "parents": [
        "Jokha Alharthi",
        "Vasdev Mohi"
    ],
    "counts": [
        1,
        2
    ]
}

Charts
Grid
Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 04 Apr 2022
Narrow your results
Done
Selected tags
Charts
Grid
Tags
General Discussions
Wrappers for React
Scheduler
Filter 
DropDownList
Editor
Form
Styling / Themes
TreeList
PDF Processing
Styling
DatePicker
ComboBox
Excel Export
Input
Dialog
Upload
Button
TreeView
Drag and Drop
Drawer
MultiSelect
NumericTextBox
Accessibility
Menu
Checkbox
Tooltip
AutoComplete
DateTimePicker
Popup
Sortable
Data Query
DateInput
Drawing
Pager 
Window
Calendar
Licensing
Localization
PDF Viewer
Gantt
FontIcon
Labels 
Animation
TabStrip
TimePicker
Card
Conversational UI 
DateRangePicker
PanelBar
Splitter
Badge 
DropDownButton
MultiViewCalendar
Slider
Stepper
Spreadsheet
TextBox
AppBar
File Saver
ListView
MaskedTextBox
RadioButton
Security
Switch
TaskBoard
DropDownTree
Map
PivotGrid
Avatar
Date Math
Gauge
RadioGroup
RangeSlider
Rating
TextArea
Toolbar
MultiSelectTree
ContextMenu
TileLayout
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
GridLayout
StackLayout
Timeline
ListBox
SvgIcon
Typography
ChunkProgressBar
ScrollView
Popover
Sparkline
StockChart
FileManager
ArcGauge
CircularGauge
LinearGauge
ExternalDropZone
OrgChart
Sankey
AIPrompt
VS Code Extension
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how