Row click event of Grid

[BhavinParticipant]

I want to fetch the row number and 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>

How can I get the row click event and row number in Angular-5 ?
Thanks in Advance.

[StanislavParticipant]

Hello Bhavin,

You need to add this to your code:

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

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

Aswell as a reference to the Grid Component:

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

And in your app.component.HTML file you need to add:

(onRowclick)="Rowclick($event)"

You can take a look at our angular documentation here: Link
There is a link that leads to our API as well: Link

Best Regards,
Stanislav

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

[BhavinParticipant]

Great. It’s perfectly working. Thank you for this Perfect To the point answer.

Cheers,
Bhavin

[Author]

Posts