Grid grouping

[vin]

How to show the parent item and children togeather, they both have same header  ?
In my scenario , each item has child items

[Shalini Maragathavel]

Hi Vin, 

Thanks for contacting Syncfusion support.

Based on your query we suspect that you want to hide the headers of the childGrid. You can achieve your requirement by using the detailDataBound  event of Grid as demonstrated in the below code snippet. 

App.component.html 

              <ejs-grid #Grid id='Grid' [dataSource]='parentData' (detailDataBound)="detailDataBound($event)" 

                             [editSettings]='editSettings' [childGrid]='childGrid'> 

                             <e-columns> 

                                           ... 

                             </e-columns> 

              </ejs-grid> 

------------------------------------------------------------------

App.component.ts 

export class AppComponent {  

  ngOnInit(): void {  

    this.parentData = hierarchyOrderdata;  

    this.childGrid = {  

  } 

  detailDataBound(args){  

    args.childGrid.headerModule.headerPanel.style.display='none' 

  } 

} 

 

Please find the below sample for your reference. 

Sample : https://stackblitz.com/edit/angular-ctos22-mlvde5?file=app.component.ts

Please get back to us if you need further assistance. 

Regards 

Shalini M. 

[vin]

I added  allowDragAndDrop = true
The UI is getting bit messedup
When i drag and drop one row then UI is getting fixed!!

 <ejs-grid #grid [dataSource]='aEpics' [allowPaging]='true'

                                                [allowSorting]='true' [pageSettings]='pageOptions'

                                                [contextMenuItems]="contextMenuItems"

                                                (contextMenuClick)='contextMenuClick($event)'

                                                (rowDataBound)="rowDataBound($event)"

                                                (contextMenuOpen)="contextMenuOpen($event)" [allowExcelExport]='true'

                                                (commandClick)="commandClick($event)" [allowFiltering]='true'

                                                [filterSettings]='filterOptions' allowRowDragAndDrop="true"

                                                [childGrid]='childGrid' (detailDataBound)="detailDataBound($event)">

                                                <e-columns>

                                                    

                                                    <e-column field='itemRanking' headerText='Ranking' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='itemNumber' headerText='ID' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='name' headerText='Epic Name' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='nodeType' headerText='Node Type' textAlign='Left'

                                                        width=90>

                                                    e-column>

                                                    <e-column width=140 [commands]='commands'>e-column>

                                                e-columns>

                                            ejs-grid>

Before drag and drop

After Drag and Drop

[vin]

I added  allowDragAndDrop = true
The UI is getting bit messedup
When i drag and drop one row then UI is getting fixed!!

 <ejs-grid #grid [dataSource]='aEpics' [allowPaging]='true'

                                                [allowSorting]='true' [pageSettings]='pageOptions'

                                                [contextMenuItems]="contextMenuItems"

                                                (contextMenuClick)='contextMenuClick($event)'

                                                (rowDataBound)="rowDataBound($event)"

                                                (contextMenuOpen)="contextMenuOpen($event)" [allowExcelExport]='true'

                                                (commandClick)="commandClick($event)" [allowFiltering]='true'

                                                [filterSettings]='filterOptions' allowRowDragAndDrop="true"

                                                [childGrid]='childGrid' (detailDataBound)="detailDataBound($event)">

                                                <e-columns>

                                                    

                                                    <e-column field='itemRanking' headerText='Ranking' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='itemNumber' headerText='ID' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='name' headerText='Epic Name' textAlign='Left'

                                                        width=90>e-column>

                                                    <e-column field='nodeType' headerText='Node Type' textAlign='Left'

                                                        width=90>

                                                    e-column>

                                                    <e-column width=140 [commands]='commands'>e-column>

                                                e-columns>

                                            ejs-grid>

Before drag and drop

After Drag and Drop

Need help please

[Shalini Maragathavel]

Hi Vin, 

Sorry for the inconvenience caused.

Based on your query we suspect that you are facing an issue while drag and drop the row in Hierarchy Grid at initial rendering. So we have prepared a sample in Hierarchy Grid and Performed row drag and drop but we did not face the mentioned issue at our end.

For your convenience we have attached the sample and please find the sample for your reference 

Sample : https://stackblitz.com/edit/angular-ctos22-qsysiv?file=app.component.html

If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 

 

1)   Share your complete Grid rendering code(If you have rendered grid inside any component like Dialog, Tab., etc) 

 

2)   If possible please replicate the issue in the attached sample.  

3)  Syncfusion package version 

Regards,
Shalini M. 

[vin]

To fix the issue i used this.grid.refreshColumns();  

and it works but

I am seeing this error in console

[Shalini Maragathavel]

Hi Vin, 

Sorry for the inconvenience caused.

Based on your query we suspect that you are facing an issue while drag and drop the row in Hierarchy Grid at initial rendering.  

To resolve the issue you have used refreshColumns() method of EJ2 Grid. By default in EJ2 Grid the refreshColumns method is used to refresh the grid column changes. So, we have prepared a sample and tried to reproduce the issue but we unable to reproduce the mentioned issue at our end without using refreshColumns() method

For your convenience we have attached the sample and please find the sample for your reference 

Sample : https://stackblitz.com/edit/angular-ctos22-qsysiv?file=app.component.html

If you are still facing the issue, kindly share the following details that will be helpful for us to provide better solution. 

 

1)   Did you apply any external css in your application? If yes please share the css code file. 

 

2)   If possible please replicate the issue in the attached sample.  

3)  Syncfusion package version 

Regards,
Shalini M.