Dynamically put columns from files to jqwidgets in Angular 5

[BhavinParticipant]

I have a file which is basically a column json array and it’s located at assets/event_tbl.json.
event_tbl.json content.

[
        { text: 'Product Name',  datafield: 'ProductName', width: '20%' },
        { text: 'Quantity per Unit',  datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' , width: '20%'},
        { text: 'Unit Price',  datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: '20%' },
        { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: '20%' },
        { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' , width: '20%'}
]

I’m using Angular-5. Below is my component.ts file’s code. As per the requirement I need to get data from json file and if the data changed from file than it will be reflected to the jqxgrid.
With normal setup it’s working but when I tried fetching data from file it’s not reflecting.
I got the json file in this.data = data._body;
And I have stored data in this.data. And I’m able to get data from file in console.
Please check the below code.

export class DashboardComponent implements AfterViewInit {

     data: any;
     constructor(private router:Router,private http:Http) {
                    this.http.get('http://localhost:4200/assets/event_tbl.json')
                     .subscribe(data => {
                              this.data = data._body; // I got the column data from file in this variable.
                              console.log(this.data);  
                              // alert(this.data);
                      });
      }
// Jqwidgets code starts here 

@ViewChild('myGrid') myGrid: jqxGridComponent;

Rowclick(event: any): void {
    var args = event.args;
    var selectedRowIndex = args.rowindex;
    // alert(selectedRowIndex);
    $('#right_panel').css('display','block');
    $('body').removeClass('aside-menu-hidden');
}
source: any =
{
    datatype: 'xml',
    datafields: [
        { name: 'ProductName', type: 'string'  },
        { name: 'QuantityPerUnit', type: 'int' },
        { name: 'UnitPrice', type: 'float' },
        { name: 'UnitsInStock', type: 'float' },
        { name: 'Discontinued', type: 'bool' }
    ],
    root: 'Products',
    record: 'Product',
    id: 'ProductID',
    url: '../../assets/product.xml'
};
// console.log(data);

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

cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
    if (value < 20) {
        return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span></code>;
    }
    else {
        return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span></code>;
    }
};

columns: any[] = this.data;       // I'm using this.data here but it's not working.

columngroups: any[] =
[
    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
];
}

[HristoParticipant]

Hello Bhavin,

Please, try with this approach:

ngAfterViewInit() {
	this.myGrid.columns(this.data);
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts