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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic ChilGrid row select and generic grid Row-Click interception

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
loading
Tags: Grid
Tabular
Asked On August 20, 2019 07:01 PM UTC

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




Pavithra Subramaniyam [Syncfusion]
Replied On August 21, 2019 10:34 AM UTC

Hi Lino, 
 
Greetings from Syncfusion. 
 
Query #1: When a row of the PARENT grid is selected, this function should select all the rows of the CHILD grid related to it. 
 
You can achieve this by using the “rowSelected” of parent Grid and “dataBound” event of child Grid. Please refer to the below code example and sample link for more information. 
 
[component.ts] 
@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() 
    } 
  } 
} 
 
 
Note: You can select or deselect the child grid only when select/deselect the corresponding parent row not by using select all check box of parent Grid. 
 
 
Query #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. 
 
You can get the clicked row details by using “getRowObjectFromUID” method of Grid component. Please refer to the below code example. 
 
[component.ts] 
@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); 
    } 
  } 
 
} 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Pavithra S. 


Tabular
Replied On August 22, 2019 06:58 AM UTC

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


Pavithra Subramaniyam [Syncfusion]
Replied On August 22, 2019 12:24 PM UTC

Hi Lino, 
 
Thanks for your update. 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon