Export data locally to variable in grails application is not working

[svedavyaParticipant]

Hi Team,

I am using export functionality I need to implement export to CSV, as I am using jqxwidgets in grails application with angular 4 , I cannot use the save-file.php, and with below code, I am always redirected to https://jquerygrid.net/export_server/dataexport.php with a 404 error and my local object where I am fetching JSON is undefined

Kindly suggest how can I get data into a local variable so, I can use another 3rd party plugin to export csv. Or does licence version supports grails/angular4 application?

Below is the code sample(same from your example which I was trying before changing to my project needs)
### reports.component.html ###
<div class=”app-body”>
<main class=”main”>
<!– Main content here –>
<jqxTreeGrid
[width]=”850″
[source]=”dataAdapter”
[columns]=”columns”
[ready]=”ready”
[exportSettings]=”exportSettings”
#TreeGrid>
</jqxTreeGrid>

<div style=”margin-top: 20px;”>
<div style=”float: left; margin-left: 10px;”>
<jqxButton #csvExport (onClick)=”csvExportClick()”>Export to CSV</jqxButton>
</div>
<div style=”float: left; margin-left: 10px;”>
<jqxButton #jsonExport (onClick)=”jsonExportClick()”>Export to JSON</jqxButton>
</div>
</div>
</main>
</div>

import {Component, ViewChild, OnInit, AfterViewInit} from ‘@angular/core’;
import {jqxTreeGridComponent} from ‘jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid’;
@Component({
selector: ‘app-reports’,
templateUrl: ‘./reports.component.html’,
styleUrls: [‘./reports.component.css’]
})
export class ReportsComponent implements AfterViewInit {

constructor() { }
ngOnInit() {

}

ngAfterViewInit(): void {
}
@ViewChild(‘TreeGrid’) treeGrid: jqxTreeGridComponent;

employees: any[] = [{ ‘EmployeeID’: 1, ‘FirstName’: ‘Nancy’, ‘LastName’: ‘Davolio’, ‘ReportsTo’: 2, ‘Country’: ‘USA’, ‘Title’: ‘Sales Representative’, ‘HireDate’: ‘1992-05-01 00:00:00’, ‘BirthDate’: ‘1948-12-08 00:00:00’, ‘City’: ‘Seattle’, ‘Address’: ‘507 – 20th Ave. E.Apt. 2A’ }]
_data:any ;

exportSettings: any =
{
columnsHeader: true, hiddenColumns: false,
serverURL: null, characterSet: null,
collapsedRecords: false, recordsInView: true,
fileName: “jqxTreeGrid”
}
source: any =
{
dataType: ‘json’,
dataFields: [
{ name: ‘EmployeeID’, type: ‘number’ },
{ name: ‘ReportsTo’, type: ‘number’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘Country’, type: ‘string’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘HireDate’, type: ‘date’ },
{ name: ‘BirthDate’, type: ‘date’ }
],
hierarchy:
{
keyDataField: { name: ‘EmployeeID’ },
parentDataField: { name: ‘ReportsTo’ }
},
id: ‘EmployeeID’,
localData: this.employees
};

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

columns: any[] = [
{ text: ‘First Name’, dataField: ‘FirstName’, width: 200 },
{ text: ‘Last Name’, dataField: ‘LastName’, width: 150 },
{ text: ‘Title’, dataField: ‘Title’, width: 160 },
{ text: ‘Birth Date’, dataField: ‘BirthDate’, cellsFormat: ‘d’, width: 120 },
{ text: ‘Hire Date’, dataField: ‘HireDate’, cellsFormat: ‘d’, width: 120 },
{ text: ‘Address’, dataField: ‘Address’, width: 250 },
{ text: ‘City’, dataField: ‘City’, width: 120 },
{ text: ‘Country’, dataField: ‘Country’, width: 120 }
];

ready(): void {
this.treeGrid.expandRow(2);
};

jsonExportClick(): void {
this._data = this.treeGrid.exportData(‘json’);
console.log(this.treeGrid.exportData(‘json’)); // prints undefined
console.log(this._data); // prints undefined
};

}

Kindly have alook at the issue and suggest me possible solutions , as its urgent requirement for me to achieve.

Thanks & Regards
Sandeep Vedavyas

[ritesh955Participant]

Hi… I m also facing same issue for a java application… can you please help?

[Peter StoevKeymaster]

Hi Friends,

I think you will have to update to the current version of jQWidgets or clear your browser cache. Below is a sample we tested right now which exports the data to a variable.

app.component.ts:

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { jqxTreeGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
    // templateUrl: './reports.component.html',
    // styleUrls: ['./reports.component.css']
})

export class AppComponent implements AfterViewInit {
    constructor() { }
    ngOnInit() {
    }
    ngAfterViewInit(): void {
    }
    @ViewChild('TreeGrid') treeGrid: jqxTreeGridComponent;
	
    employees: any[] = [{ 'EmployeeID': 1, 'FirstName': 'Nancy', 'LastName': 'Davolio', 'ReportsTo': 2, 'Country': 'USA', 'Title': 'Sales Representative', 'HireDate': '1992-05-01 00:00:00', 'BirthDate': '1948-12-08 00:00:00', 'City': 'Seattle', 'Address': '507 – 20th Ave. E.Apt. 2A' }];
	
    _data: any;
	
    exportSettings: any =
    {		
        columnsHeader: true, 
		hiddenColumns: false,
        //serverURL: null,
		//fileName: null,
		characterSet: null,
        collapsedRecords: false, 
		recordsInView: true,
        fileName: null //"jqxTreeGrid"
    };
	
    source: any =
    {
        dataType: 'json',
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' },
            { name: 'Country', type: 'string' },
            { name: 'City', type: 'string' },
            { name: 'Address', type: 'string' },
            { name: 'Title', type: 'string' },
            { name: 'HireDate', type: 'date' },
            { name: 'BirthDate', type: 'date' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
	
    dataAdapter: any = new jqx.dataAdapter(this.source);
	
    columns: any[] = [
        { text: 'First Name', dataField: 'FirstName', width: 200 },
        { text: 'Last Name', dataField: 'LastName', width: 150 },
        { text: 'Title', dataField: 'Title', width: 160 },
        { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
        { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
        { text: 'Address', dataField: 'Address', width: 250 },
        { text: 'City', dataField: 'City', width: 120 },
        { text: 'Country', dataField: 'Country', width: 120 }
    ];
	
    ready(): void {
        this.treeGrid.expandRow(2);
    };
	
    csvExportClick(): void {
        console.log('csvExportClick');
    };
	
	jsonExportClick(): void {
    	this._data = this.treeGrid.exportData('json');
        console.log(this.treeGrid.exportData('json')); // prints the data
        console.log(this._data); // prints the data
    };
}

app.component.html

<div class="app-body">
    <main class="main">
        <!– Main content here –>
        <jqxTreeGrid [width]="850"
                     [source]="dataAdapter"
                     [columns]="columns"
                     [ready]="ready"
                     [exportSettings]="exportSettings"
                     #TreeGrid>
        </jqxTreeGrid>
        <div style="margin-top: 20px;">
            <div style="float: left; margin-left: 10px;">
                <jqxButton #csvExport (onClick)="csvExportClick()">Export to CSV</jqxButton>
            </div>
            <div style="float: left; margin-left: 10px;">
                <jqxButton #jsonExport (onClick)="jsonExportClick()">Export to JSON</jqxButton>
            </div>
        </div>
    </main>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';
import { jqxTreeGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxtreegrid';
import { jqxButtonComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbuttons';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
      AppComponent, jqxGridComponent, jqxTreeGridComponent, jqxButtonComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[svedavyaParticipant]

Hi Peter,

I am able to extract the data to JSON, but the issue i am facing is with the parsing the rows due to parent and child nested values like below-having child inside the parent which is not understandable by many angular 2 json-csv plugins, is there any specific settings to get a flat list of records, so I can export them without parent-child relation ? Kindly suggest if any solution available.

[{“First Name”:”Andrew”,”Last Name”:”Fuller”,”Title”:”Vice President, Sales”,”Birth Date”:”2/19/1952″,”Hire Date”:”8/14/1992″,”Address”:”908 W. Capital Way”,”City”:”Tacoma”,”Country”:”USA”,”rows”:[{“First Name”:”Nancy”,”Last Name”:”Davolio”,”Title”:”Sales Representative”,”Birth Date”:”12/8/1948″,”Hire Date”:”5/1/1992″,”Address”:”507 – 20th Ave. E.Apt. 2A”,”City”:”Seattle”,”Country”:”USA”,”rows”:[]},{“First Name”:”Janet”,”Last Name”:”Leverling”,”Title”:”Sales Representative”,”Birth Date”:”8/30/1963″,”Hire Date”:”4/1/1992″,”Address”:”722 Moss Bay Blvd.”,”City”:”Kirkland”,”Country”:”USA”,”rows”:[]},{“First Name”:”Margaret”,”Last Name”:”Peacock”,”Title”:”Sales Representative”,”Birth Date”:”9/19/1937″,”Hire Date”:”5/3/1993″,”Address”:”4110 Old Redmond Rd.”,”City”:”Redmond”,”Country”:”USA”,”rows”:[]},{“First Name”:”Steven”,”Last Name”:”Buchanan”,”Title”:”Sales Manager”,”Birth Date”:”3/4/1955″,”Hire Date”:”10/17/1993″,”Address”:”14 Garrett Hill”,”City”:”London”,”Country”:”UK”,”rows”:[{“First Name”:”Michael”,”Last Name”:”Suyama”,”Title”:”Sales Representative”,”Birth Date”:”7/2/1963″,”Hire Date”:”10/17/1993″,”Address”:”Coventry House Miner Rd.”,”City”:”London”,”Country”:”UK”,”rows”:[]},{“First Name”:”Robert”,”Last Name”:”King”,”Title”:”Sales Representative”,”Birth Date”:”5/29/1960″,”Hire Date”:”1/2/1994″,”Address”:”Edgeham Hollow Winchester Way”,”City”:”London”,”Country”:”UK”,”rows”:[]},{“First Name”:”Anne”,”Last Name”:”Dodsworth”,”Title”:”Sales Representative”,”Birth Date”:”1/27/1966″,”Hire Date”:”11/15/1994″,”Address”:”7 Houndstooth Rd.”,”City”:”London”,”Country”:”UK”,”rows”:[]}]},{“First Name”:”Laura”,”Last Name”:”Callahan”,”Title”:”Inside Sales Coordinator”,”Birth Date”:”1/9/1958″,”Hire Date”:”3/5/1994″,”Address”:”4726 – 11th Ave. N.E.”,”City”:”Seattle”,”Country”:”USA”,”rows”:[]}]}]

Thanks
Sandeep

[Peter StoevKeymaster]

Hi Sandeep,

This is a Tree Grid. It has parent-child relationship. That is the reason it has it in the export as well. Unfortunately, we do not have other way to export JSON with the Tree Grid.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[ritesh955Participant]

Hi Peter,

Thanks for the solution, it worked for me too. The data json comes with column formats like $, is there a way we can exclude column format from data so that my clients can do data summation and all in spreadsheet for evaluation purpose

Thanks
Ritesh

[Peter StoevKeymaster]

Hi Ritesh,

Which angular component do you use?

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[ritesh955Participant]

Hi Peter,

I use angular treeGrid component, I am trying to export with cellsFormat: ‘c’… but when I try to extract the json with export. I don’t want columns formatted with dollar($)

Thanks
ritesh

[Peter StoevKeymaster]

Hi Ritesh,

I will add a work item for future settings for exportSettings. For now, this is not possible with our angular tree grid component.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts