1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cell Merging in Tree Grid

Cell Merging in Tree Grid

Hi! It is possible to acheive cell merging like this in the tree grid in angular?


5 Replies 1 reply marked as answer
PK Padmavathy Kamalanathan Syncfusion Team July 8, 2020 09:56 AM UTC

Hi Cesar,
 
  
Thanks for contacting Syncfusion Forums. 
  
QUERY: Cell Merging in Tree Grid 
  
We have achieved your requirement by setting the args.colSpan and args.rowSpan property in the queryCellInfo event of Tree Grid.  
  
Please check the below code snippet, 
  
  
<ejs-treegrid #treegrid [dataSource]='data'  
  [treeColumnIndex]='1' (queryCellInfo)='queryCellInfo($event)'> 
    <e-columns> 
        ----- 
    </e-columns> 
</ejs-treegrid> 
  
 
queryCellInfo(args) { 
  if(args.column.field == "Duration") { 
   if(args.data.Duration == 5) { 
     args.colSpan = 2; 
    // merging 2 columns of same row using colSpan property
 
   } 
   if(args.data.Duration == 11) { 
     args.rowSpan = 2; 
     // merging 2 columns of different row using rowSpan property
 
   } 
  } 
 } 
 

Please check the  below output screenshot, 

 

 
 
Please check the below sample,
 
  
Please refer the below API help documentation, 
  
Kindly get back to us for further assistance. 
  
Regards, 
Padmavathy Kamalanathan 


CS Cesar Smerling July 8, 2020 12:08 PM UTC

Hi!

It's seems that rowSpan is what I need, but the case you show me I need to know and define the value that need to be merge and the quantity of rows to span. 
I need that the grid detects when the value is the same and make the merge.

Thanks.

PK Padmavathy Kamalanathan Syncfusion Team July 9, 2020 02:35 PM UTC

Hi Cesar, 
  
Thanks for your update. 
  
QUERY: Tree Grid should detect adjacent row value and perform cell merging 
  
We have achieved your requirement by comparing the current row's data with the next row data using the "getCurrentViewRecords" method and setting the args.rowSpan.  
  
Please check the below code snippet, 
  
queryCellInfo(args) { 
  if(args.column.field == "Duration") { 
    let currentRowIndex = args.data.index; //current row's index 
    let lastIndex = this.treegrid.getCurrentViewRecords().length - 1; // last row index 
    if(lastIndex != currentRowIndex) { 
    let nextRowData = this.treegrid.getCurrentViewRecords()[currentRowIndex + 1].Duration;  
    // getting next row's duration column data to compare with current row's duration value. 
  
   if(args.data.Duration == nextRowData) { 
     //if both values are same, setting row span 
     args.rowSpan = 2; 
  
   } 
    } 
  } 
} 
  
Please check the below sample, 
  
Please check the below API help documentation, 
  
Kindly get back to us for further assistance. 
  
Regards, 
Padmavathy Kamalanathan 


Marked as answer
CS Cesar Smerling July 13, 2020 08:24 PM UTC

Thanks

PK Padmavathy Kamalanathan Syncfusion Team July 14, 2020 09:49 AM UTC

Hi Cesar,

We are glad to hear that you have achieved your requirement. 

 
Kindly get back to us for further assistance. 
  
Regards, 
Padmavathy Kamalanathan 


Loader.
Up arrow icon