Hi,
I am trying check all the row when I click on the checkbox header. It works on Jquery but the same functionality does not work in Angular.
Grid comes undefined. Below is the AppComponent.ts
import { Component, ViewChild } from “@angular/core”;
import { jqxGridComponent } from “jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid”;
@Component({
selector: “app-root”,
templateUrl: “./app.component.html”,
styleUrls: [“./app.component.css”]
})
export class AppComponent
{
@ViewChild(“myGrid”) public myGrid: jqxGridComponent;
source: any =
{
localData:
[
[true, ‘Anil’, ‘kumar’, ‘India’],
[true, ‘Suha’, ‘kumar’, ‘India’],
[true, ‘Ayush’, ‘kumar’, ‘India’]
],
datafields:
[
{name: ‘checked’, type: ‘boolean’, map: ‘0’},
{name: ‘Firstname’, type: ‘string’ , map: ‘1’},
{name: ‘LastName’, type: ‘string’ , map: ‘2’},
{name: ‘Country’, type: ‘string’ , map: ‘3’},
],
datatype: ‘array’
};
dataAdapter: any = new jqx.dataAdapter(this.source);
columnRenderer():string
{
return ‘<div style=”display:table;padding-left:10px; margin:0px; margin-top:10px;”></div>’;
}
checkboxHeader(element:any):boolean
{
let checkbox = jqwidgets.createInstance(element, ‘jqxCheckBox’, {theme:’metro’});
var grid = this.myGrid;
checkbox.addEventHandler(‘change’, (event: any) =>
{
alert(event.args.checked);
//Undefined
alert(this.myGrid);`
});
return true;
}
columns: any [] =
[
{
menu: false,
datafield: ‘checked’,
width : ’42’,
columntype: ‘checkbox’,
editable: true,
renderer: this.columnRenderer,
rendered: this.checkboxHeader
},
{
text: ‘First Name’,
datafield : ‘Firstname’,
width : ‘25%’
},
{
text: ‘Last Name’,
datafield : ‘LastName’,
width : ‘25%’
},
{
text: ‘Country’,
datafield : ‘Country’,
width : ‘25%’
}
]
}
