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:
<DropDownList value={currentLocale} textField="language" onChange={e => {
setCurrentLocale(e.target.value);
}} data={locales} />
<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>
<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>1 Answer, 1 is accepted
0
Accepted
Hello, Erwin,
I have just answered your support thread on this matter, but for the convenience of the other users I will paste my reply here as well:
The most important thing you will need to do is to defined all used components through the window object.KendoReact[ComponentName] collections (they should match the ones imported from the React packages). We recommend that you load the scripts of each package separately as not all components are exposed in the kendo-react-all package (I will make sure to add this information in the documentation as well.
For example, if you want to use the components from the @progress/kendo-react-chart package, you can load it like follows:
<script src="https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js"></script> const Chart = window.KendoReactCharts.Chart
const ChartTitle = window.KendoReactCharts.ChartTitle;
const ChartLegend = window.KendoReactCharts.ChartLegend
const ChartCategoryAxis = window.KendoReactCharts.ChartCategoryAxis
...
Also, you will need to replace the <my-app> element with a standard <div> inside the body:
<body>
<div id="kendo-react-container"></div>
</body> ReactDOM.render(
<App/>,
document.getElementById('kendo-react-container')
);
You can find the requested script samples below:
- Scheduler - https://dojo.telerik.com/IzoFimUv
- PivotGrid - https://dojo.telerik.com/IhacirIy
- Data Grid - https://dojo.telerik.com/uwIPAKAg
- Gantt - https://dojo.telerik.com/uNAXAFij
- Chart - https://dojo.telerik.com/uMAVuDiT
Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
ErL
commented on 10 Nov 2022, 05:59 PM
Top achievements
Rank 1
Rank 1
this is awesome thank you Vessy! hopefully this will help others in the future as well!