Export data in jqxGrid is broken?

[tihomir22Participant]

Hi!

I’m having problems with the jqxgrid. When i try to export to csv or any format it gives me this error

“ERROR TypeError: Cannot set property ‘hierarchy’ of undefined
at d (jqxdata.export.js:8)
at l.exportTo (jqxdata.export.js:8)
at l.exportToFile (jqxdata.export.js:8)
at c.<computed>.exportdata (jqxgrid.export.js:8)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.b.jqx.invoke (jqxcore.js:15)
at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.b.jqx.jqxWidgetProxy (jqxcore.js:15)
at HTMLDivElement.<anonymous> (jqxcore.js:15)
at Function.each (jqxcore.js:8)
at init.each (jqxcore.js:8)
at init.b.fn.<computed> [as jqxGrid] (jqxcore.js:15)”

My code is the following:

HTML View:

<jqxGrid #myGrid [width]="850" [source]="dataAdapter" [columns]="columns"
         [columnsresize]="true" [sortable]="true" [autoshowloadelement]="true">
</jqxGrid>
<button (click)="exportarCSV()">Exportar CSV</button>

Controller :

import { jqxGridComponent } from "jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid";
import { Component, ViewChild } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  @ViewChild("myGrid", { static: false }) myGrid: jqxGridComponent;

  constructor() {}

  ngAfterViewInit() {
    this.source.localdata = this.returnData();
    this.myGrid.updatebounddata();
  }

  source: any = {
    localdata: [],
    datafields: [
      { name: "name", type: "string" },
      { name: "type", type: "string" },
      { name: "calories", type: "int" },
      { name: "totalfat", type: "string" },
      { name: "protein", type: "string" }
    ],
    datatype: "json"
  };

  dataAdapter: any = new jqx.dataAdapter(this.source);

  columns: any[] = [
    { text: "Name", datafield: "name", width: 250 },
    { text: "Beverage Type", datafield: "type", width: 250 },
    { text: "Calories", datafield: "calories", width: 180 },
    { text: "Total Fat", datafield: "totalfat", width: 120 },
    { text: "Protein", datafield: "protein", minwidth: 120 }
  ];

  private returnData() {
    return [
      {
        id: "1",
        name: "Hot Chocolate",
        type: "Chocolate Beverage",
        calories: "370",
        totalfat: "16g",
        protein: "14g"
      },
      {
        id: 2,
        name: "Peppermint Hot Chocolate",
        type: "Chocolate Beverage",
        calories: "440",
        totalfat: "16g",
        protein: "13g"
      },
      {
        id: "3",
        name: "Salted Caramel Hot Chocolate",
        type: "Chocolate Beverage",
        calories: "450",
        totalfat: "16g",
        protein: "13g"
      },
      {
        id: "4",
        name: "White Hot Chocolate",
        type: "Chocolate Beverage",
        calories: "420",
        totalfat: "16g",
        protein: "12g"
      },
      {
        id: "5",
        name: "Caffe Americano",
        type: "Espresso Beverage",
        calories: "15",
        totalfat: "0g",
        protein: "1g"
      },
      {
        id: "6",
        name: "Caffe Latte",
        type: "Espresso Beverage",
        calories: "190",
        totalfat: "7g",
        protein: "12g"
      },
      {
        id: "7",
        name: "Caffe Mocha",
        type: "Espresso Beverage",
        calories: "330",
        totalfat: "15g",
        protein: "13g"
      },
      {
        id: "8",
        name: "Cappuccino",
        type: "Espresso Beverage",
        calories: "120",
        totalfat: "4g",
        protein: "8g"
      },
      {
        id: "9",
        name: "Caramel Brulee Latte",
        type: "Espresso Beverage",
        calories: "420",
        totalfat: "9g",
        protein: "8g"
      },
      {
        id: "10",
        name: "Caramel Macchiato",
        type: "Espresso Beverage",
        calories: "240",
        totalfat: "11g",
        protein: "10g"
      },
      {
        id: "11",
        name: "Peppermint Hot Chocolate",
        type: "Espresso Beverage",
        calories: "440",
        totalfat: "10g",
        protein: "13g"
      },
      {
        id: "12",
        name: "Cinnamon Dolce Latte",
        type: "Espresso Beverage",
        calories: "260",
        totalfat: "6g",
        protein: "10g"
      },
      {
        id: "13",
        name: "Eggnog Latte",
        type: "Espresso Beverage",
        calories: "460",
        totalfat: "16g",
        protein: "13g"
      },
      {
        id: "14",
        name: "Espresso",
        type: "Espresso Beverage",
        calories: "5",
        totalfat: "1g",
        protein: "1g"
      },
      {
        id: "15",
        name: "Espresso Con Panna",
        type: "Espresso Beverage",
        calories: "30",
        totalfat: "1g",
        protein: "0g"
      },
      {
        id: "16",
        name: "Espresso Macchiato",
        type: "Espresso Beverage",
        calories: "100",
        totalfat: "1g",
        protein: "0g"
      },
      {
        id: "17",
        name: "Flavored Latte",
        type: "Espresso Beverage",
        calories: "250",
        totalfat: "6g",
        protein: "12g"
      },
      {
        id: "18",
        name: "Gingerbread Latte",
        type: "Espresso Beverage",
        calories: "320",
        totalfat: "13g",
        protein: "12g"
      },
      {
        id: "19",
        name: "White Chocolate Mocha",
        type: "Espresso Beverage",
        calories: "470",
        totalfat: "18g",
        protein: "15g"
      },
      {
        id: "20",
        name: "Skinny Peppermint Mocha",
        type: "Espresso Beverage",
        calories: 130,
        totalfat: "15g",
        protein: "13g"
      },
      {
        id: "21",
        name: "Skinny Flavored Latte",
        type: "Espresso Beverage",
        calories: "120",
        totalfat: "0g",
        protein: "12g"
      },
      {
        id: "22",
        name: "Pumpkin Spice Latte",
        type: "Espresso Beverage",
        calories: "380",
        totalfat: "13g",
        protein: "14g"
      },
      {
        id: "23",
        name: "Caffe Vanilla Frappuccino",
        type: "Frappuccino Blended Beverage",
        calories: "310",
        totalfat: "3g",
        protein: "3g"
      },
      {
        id: "24",
        name: "Caffe Vanilla Frappuccino Light",
        type: "Frappuccino Blended Beverage",
        calories: "180",
        totalfat: "0g",
        protein: "3g"
      },
      {
        id: "25",
        name: "Caramel Brulee Frappuccino",
        type: "Frappuccino Blended Beverage",
        calories: "410",
        totalfat: "13g",
        protein: "4g"
      },
      {
        id: "26",
        name: "Caramel Brulee Frappuccino Light",
        type: "Frappuccino Blended Beverage",
        calories: "190",
        totalfat: "0g",
        protein: "3g"
      },
      {
        id: "27",
        name: "Eggnog Frappuccino",
        type: "Frappuccino Blended Beverage",
        calories: "420",
        totalfat: "18g",
        protein: "7g"
      },
      {
        id: "28",
        name: "Mocha Frappuccino",
        type: "Frappuccino Blended Beverage",
        calories: "400",
        totalfat: "15g",
        protein: "5g"
      },
      {
        id: "29",
        name: "Tazo Green Tea Creme Frappuccino",
        type: "Frappuccino Blended Beverage",
        calories: "430",
        totalfat: "16g",
        protein: "6g"
      }
    ];
  }

  public exportarCSV() {
    this.myGrid.exportdata("html", "jqxGrid");
  }
}

As you see its very basic example i do here and it doesn’t works, currently im using angular with it latest version (8.1.2) and same for jqwidgets, i have this “jqwidgets-scripts”: “~8.1.4”, installed.

What is going on?

[Peter StoevKeymaster]

Hi,

Please, refer to https://stackblitz.com/edit/github-akikbx?file=src/app/app.component.ts. It is using the latest 8.1.4 version and works as expected.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[tihomir22Participant]

I was using the last version too, i’ve tried it and didnt work, i made a github repository, i would be grateful if you can check the code, is your example basically.

https://github.com/tihomir22/stackblitz-test-exportingJQX

[glennParticipant]

I am having the same problem using angular 8.1.1 and jqwidgets-ng version ^8.1.4
So, interested in help you can provide please.

[jnbastokyParticipant]

I’m getting the same error with jqxScheduler.

[Peter StoevKeymaster]

Working sample is available on the link I already shared. The sample is referring the latest version of the software – 8.1.4. Our team is unable to reproduce such behavior.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts