Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 146804 | Aug 20,2019 07:01 PM UTC | Aug 22,2019 12:24 PM UTC | Angular - EJ 2 | 3 |
|
Tags: Grid |
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
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
