This is a migrated thread and some comments may be shown as answers.

pivot grid not work

10 Answers 47 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Mohammad
Top achievements
Rank 1
Veteran
Mohammad asked on 26 Aug 2020, 04:39 AM

'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

Sort by
0
Accepted
Stefan
Telerik team
answered on 26 Aug 2020, 10:33 AM

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';
Please give this a try and advise if the issue still occurs.

 

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).

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 07:42 AM
thnx
0
Mohammad
Top achievements
Rank 1
Veteran
answered on 27 Aug 2020, 07:48 AM

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: newRows
12.                    },
13.                    schema: {
14.                        type: "xmla"
15.                    },
16.                    error: function (e) {
17.                        alert("error: " + kendo.stringify(e.errors[0]));
18.                    }
19.                });
0
Stefan
Telerik team
answered on 27 Aug 2020, 12:08 PM

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/.

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 01 Sep 2020, 07:17 AM
Your answer is with jquery but my code is React I have a list of data that is generated in a function and I want to display this information as a pivot
0
Stefan
Telerik team
answered on 01 Sep 2020, 08:05 AM

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).

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 02 Sep 2020, 11:42 AM
There is no example for react that I can use local information
0
Stefan
Telerik team
answered on 03 Sep 2020, 06:55 AM

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/.

0
Mohammad
Top achievements
Rank 1
Veteran
answered on 19 Sep 2020, 09:49 AM
I want filled Datasource in an event during the run time
0
Stefan
Telerik team
answered on 22 Sep 2020, 07:21 AM

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/.

Tags
Wrappers for React
Asked by
Mohammad
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Mohammad
Top achievements
Rank 1
Veteran
Share this question
or