We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.Hello,
is there a way to select, and deselect, the lines of a child grid by code?
I'll explain, I have two grids, parent gird and child grid.
In both the grids I have defined the selection of the lines by checkbox, but only for the parent grid i go with checkboxOnly=true.
Everything seems to work as expected, but I have two goals that I don't manage to achieve:
Function 1.
When a row of the PARENT grid is selected, this function should select all the rows of the CHILD grid related to it.
Function 2.
When a row of the parent grid is clicked (single click), this function should be able to access the data of the row clicked and extract some info.
Here are the 2 grids: (Env: .net core 2.2 - angular 7 – Syncfusion 16.4.0.42)
PARENT GRID
<ejs-grid #grid [dataSource]='service.listMaster' [childGrid]='childGrid'
height="615px" gridLines="Both"
(rowSelected)='rowSelected($event)' (rowDeselected)='rowDeselected($event)' (detailDataBound)="detailDataBound($event)" >
<e-columns>
<e-column type='checkbox' width='50'></e-column>
<e-column field='DataConsegnaRich' headerText='Consegna Prev.' width='120' textAlign='Center'></e-column>
<e-column field='DataRegistrazione' headerText='Data Reg.' width='120' textAlign='Center'></e-column>
<e-column field='NumRegistraz' headerText='Numero Reg.' width='120' textAlign='Center'></e-column>
<e-column field='DatiSpedRagSoc1' headerText='Destinatario' width='170'></e-column>
<e-column field='DatiSpedLocalita1' headerText='Località' width='120'></e-column>
</e-columns>
</ejs-grid>
CHILD GRID
this.childGrid = {
queryString: 'IdDocumento',
detailDataBound: this.detailDataBound,
columns: [
{ type: 'checkbox', width: '50' },
{ field: 'DesArt', headerText: 'Articolo', textAlign: 'Left', width: '30%' },
{ field: 'UnitaMisura', headerText: 'U.m.', textAlign: 'Center', width: '15%' },
{ field: 'Quantita', headerText: 'Qta', textAlign: 'Center', width: '15%' },
{ field: 'Stato', headerText: 'Stato', textAlign: 'Center', width: '15%' }
],
};
...
this.childGrid.dataSource = this.service.listDetail;
Any suggestions are appreciated, thanks.
Lino
|
@Component({
selector: 'app-root',
template: ` <ejs-grid #grid id='Grid' [dataSource]='parentData' [childGrid]='childGrid' (rowSelected)='rowSelected($event)' (rowDeselected)='rowDeselected($event)' [selectionSettings]="selection" (click)="click($event)" >
<e-columns>
<e-column type='checkbox' width='50'></e-column>
. . .
</e-columns>
</ejs-grid>
`,
providers: [DetailRowService]
})
export class AppComponent {
. . .
ngOnInit(): void {
this.parentData = employeeData;
this.childGrid = {
dataSource: orderDatas,
queryString: 'EmployeeID',
. . .
dataBound: function (e) {
let parentROw = (parentsUntil(this.element, 'e-detailrow').previousSibling as any);
if (parentROw.querySelector(".e-gridchkbox .e-frame").classList.contains("e-check")) {
this.selectionModule.checkSelectAll()
}
}
};
}
rowSelected(e) {
if (e.row.nextElementSibling.classList.contains("e-detailrow")) {
e.row.nextElementSibling.getElementsByClassName('e-grid')[0].ej2_instances[0].selectionModule.checkSelectAll()
}
}
rowDeselected(e) {
if (e.row[0].nextElementSibling.classList.contains("e-detailrow")) {
e.row[0].nextElementSibling.getElementsByClassName('e-grid')[0].ej2_instances[0].clearSelection()
}
}
}
|
|
@Component({
selector: 'app-root',
template: ` <ejs-grid #grid id='Grid' [dataSource]='parentData' [childGrid]='childGrid' (rowSelected)='rowSelected($event)' (rowDeselected)='rowDeselected($event)' [selectionSettings]="selection" (click)="click($event)" >
<e-columns>
<e-column type='checkbox' width='50'></e-column>
. . .
</e-columns>
</ejs-grid>
`,
providers: [DetailRowService]
})
export class AppComponent {
. . .
click(e) {
if (e.target.classList.contains('e-rowcell')) {
let rowObj = this.grid.getRowObjectFromUID(parentsUntil(e.target, 'e-row').getAttribute('data-uid'));
console.log(rowObj);
}
}
}
|
PERFECT!
Thank you very much Pavithra.
I
actually hoped there was some combination of methods of their own but
that's okay.
I
implemented it and everything works perfectly, all it takes is
cleaning up the check from the parent grid line when there are no
detail lines selected, but this is easy to add.
Thanks again for your competence and speed of response.
Ciao :)
Lino
