'kendo' is not defined no-undef
Hello I encounter this error when using the pivot grid using the sample code below
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import '@progress/kendo-ui';
import { PivotGrid, PivotGridConfigurator } from '@progress/kendo-pivotgrid-react-wrapper';
class PivotGridContainer extends React.Component {
constructor(props) {
super(props);
this.dataSource = new kendo.data.PivotDataSource({
type: "xmla",
columns: [{ name: "[Date].[Calendar]", expand: true }, { name: "[Product].[Category]" }],
rows: [{ name: "[Geography].[City]" }],
measures: ["[Measures].[Reseller Freight Cost]"],
transport: {
connection: {
catalog: "Adventure Works DW 2008R2",
cube: "Adventure Works"
},
read: "https://demos.telerik.com/olap/msmdpump.dll"
},
schema: {
type: "xmla"
},
error: function (e) {
alert("error: " + kendo.stringify(e.errors[0]));
}
});
}
render() {
return (
<div>
<PivotGridConfigurator dataSource={this.dataSource}
filterable={true}
sortable={true}
height={300}>
</PivotGridConfigurator>
<PivotGrid dataSource={this.dataSource}
filterable={true}
sortable={true}
height={550}
columnWidth={200}>
</PivotGrid>
</div>
);
}
}
ReactDOM.render(<PivotGridContainer />, document.querySelector('my-app'));
10 Answers, 1 is accepted
Hello, Mohammad,
This could be caused by the import statement.
In general import '@progress/kendo-ui'; should provide access to the kendo object.
Still, in some cases, it may require explicitly importing kendo like:
import * as kendo from '@progress/kendo-ui';
Regards,
Stefan
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Veteran
Rank 1
Veteran
The following code does not work for me, can you help?
newRows :
0: {key: 0, time: "0:11", tag: "PV", value: ""}
1: {key: 1, time: "0:11", tag: "PV", value: "ssssss105.260757446289"}
2: {key: 2, time: "0:15", tag: "PV", value: ""}
3: {key: 3, time: "0:18", tag: "PV", value: ""}
4: {key: 4, time: "0:22", tag: "PV", value: ""}
5: {key: 5, time: "0:24", tag: "PV", value: ""}
01.let dSource1 = new kendo.data.PivotDataSource({02. type: "xmla",03. columns: [{ name: "tag", expand: true }],04. rows: [{ name: "value" }],05. measures: ["time"],06. transport: {07. connection: {08. catalog: "Adventure Works DW 2008R2",09. cube: "Adventure Works"10. },11. read: newRows12. },13. schema: {14. type: "xmla"15. },16. error: function (e) {17. alert("error: " + kendo.stringify(e.errors[0]));18. }19. });Hello, Mohammad,
I`m glad to hear that the initial issue is resolved.
As for the data, I see that it is set to the read props, but that props expect an URL or a function that loads the data. If the data is locally available, please pass it directly to the data prop of the dataSource:
https://demos.telerik.com/kendo-ui/pivotgrid/local-flat-data-binding
var pivotgrid = $("#pivotgrid").kendoPivotGrid({
filterable: true,
columnWidth: 120,
height: 570,
dataSource: {
data: products,
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Hello, Mohammad,
Yes, indeed the code is for jQuery as the wrapper is using the jQuery widget underneath as has the same properties and structure.
If newRows is a function that returns data it was to be set in the data prop of the dataSource.
If it is set in the read prop, it requires to set the data to the options.success() method:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read (check the section `EXAMPLE - SET READ AS A FUNCTION`)
Regards,
Stefan
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Veteran
Hello, Mohammad,
This is an example of the wrapper version using local data and a function that returns the data:
https://stackblitz.com/edit/kendo-react-pivot-grid-cbfagd?file=app%2Fmain.js
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Hello, Mohammad,
When the data will be loaded dynamically on a specific event, we have to use the data method of the data source to pass the new data:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data
This is the updated example:
https://stackblitz.com/edit/kendo-react-pivot-grid-cbfagd?file=app%2Fmain.js
This is different than the standard React approach, but as this is a wrapper version it follows the Kendo UI for jQuery approach.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.