pivot grid not work

[Mohammad]

'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'));

[Stefan]

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

[Mohammad]

thnx

[Mohammad]

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

[Stefan]

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

[Mohammad]

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

[Stefan]

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

[Mohammad]

There is no example for react that I can use local information

[Stefan]

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

[Mohammad]

I want filled Datasource in an event during the run time

[Stefan]

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