Get Row Data on Click Event

[BhavinParticipant]

I want to fetch the row number and row data on row click event in Angular-5.

Jqwidgets components are working fine.

Dashboard.components.ts

 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’
};

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 <span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span>;
}
else {
return <span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span>;
}
};

columns: any[] =
[
{ 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%’}
];

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

In dashboard.component.html

<jqxGrid #myGrid 
              [width]="'100%'" [source]="dataAdapter" [columns]="columns"
              [sortable]="true" [filterable]="true"  [pageable]="true" 
              [enabletooltips]="true" [columnsautoresize]="true" [columnsresize]="true" [columnsreorder]="true" [autoshowfiltericon]="true"
              [autoshowfiltericon]="true" [columnmenuopening]="columnmenuopening">
          </jqxGrid>

using this function I’m able to fetch the rowclick,

export class AppComponent {
    @ViewChild('myGrid') myGrid: jqxGridComponent; 

    Rowclick(event: any): void {
        var args = event.args;
        var selectedRowIndex = args.rowindex;
    }

But I’m not able to find the row data.
So, How I can fetch the row data ? Because I’m not able to find it in document.

var selectedRowIndex = args.rowindex;

Above code returns the selected rowindex but not able to return the selected index’s row data.

[StanislavParticipant]

Hello Bhavin,

Here is an example of how to get the data on a rowClick:

app.component.html

<jqxGrid #myGrid (onRowselect)="myGridOnRowSelect($event)"
         [width]="'100%'" [source]="dataAdapter" [columns]="columns"
         [sortable]="true" [filterable]="true" [pageable]="true"
         [enabletooltips]="true" [columnsautoresize]="true" [columnsresize]="true" [columnsreorder]="true" [autoshowfiltericon]="true"
         [columnmenuopening]="columnmenuopening">
</jqxGrid>

app.component.ts: (The event)

myGridOnRowSelect(event: any): void {
        const args = event.args;
        let selectedRowIndex = args.rowindex;
        let value = this.myGrid.getrowdata(selectedRowIndex);
    }

Best Regards,
Stanislav

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

[Author]

Posts