pivot grid not work

11 posts, 1 answers
  1. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 25 Aug Link to this post

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

  2. Answer
    Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 26 Aug Link to this post

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

  3. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 27 Aug in reply to Stefan Link to this post

    thnx
  4. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 27 Aug in reply to Stefan Link to this post

    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.                });
  5. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 27 Aug Link to this post

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

  6. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 01 Sep in reply to Stefan Link to this post

    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
  7. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 01 Sep Link to this post

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

  8. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 02 Sep in reply to Stefan Link to this post

    There is no example for react that I can use local information
  9. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 03 Sep Link to this post

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

  10. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 19 Sep in reply to Stefan Link to this post

    I want filled Datasource in an event during the run time
  11. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 22 Sep Link to this post

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

Back to Top