1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. merge cell on colspan

merge cell on colspan

I have an ejGrid with a HTML table as datasource.
Is it possible to merge cells as it is defined in the <td> colspan properties?

here is a playground:
http://jsplayground.syncfusion.com/chrhjvmc

5 Replies
VN Vignesh Natarajan Syncfusion Team December 13, 2017 08:19 AM UTC

Hi Marco, 
 
Thanks for using Syncfusion products. 
 
Yes, it is possible to merge the cells. In your sample we found that you have enabled Cell Merging, but you did not call colMerge/rowMerge/merge function which is used to merge the cells.  
 
Cells can be merged by setting allowCellMerging property as true and the merge conditions can be defined in mergeCellInfo event. In this event, you can get the column details and data of that particular row in arguments of mergeCellInfo event. 
You can merge the rows and cells of grid, using rowMerge, colMerge and merge functions available in mergeCelInfo event’s argument. 
 
Refer the below code snippets 
 
     toolbarSettings: { showToolbar: false, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 
                allowScrolling: true, 
                allowCellMerging: true, 
                mergeCellInfo: function (args) { 
                         if (args.data.Events == "Flood") { 
                                                                 if (args.column.field == "Apr") 
                                                                             args.colMerge(3); 
                            } 
                } 
                    }); 
    }); 
 
 
Refer the below screenshot for the output 
 
 
 
 
 
We have modified the JSplayground sample provided to merge two cells. 
 
 
We have online sample for your requirement  
 
 
Refer our online documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 
 


MG Marco Giorgi December 13, 2017 10:47 AM UTC

Many thanks for the reply.
I'm aware of the mergeCellInfo event, but I was trying to see if there was a way to retrieve the merge conditions from the original element, the <td>.

I have explored the object args passed by the mergeCellInfo but there is no way to retrieve the original element.
I was thinking something like: args.originalElem.attributes["colspan"] to get the colspan value and pass it back as args.colMerge(colSpanValue);

Thanks
Best Regards,
Marco


VN Vignesh Natarajan Syncfusion Team December 14, 2017 04:10 PM UTC

Hi Marco, 

Thanks for the update. 

In your sample you have bound Grid with HTML elements. By default we have changed the HTML elements to JSON object before binding to Grid. so it not feasible to merge using colspan value. 
We suspect that RowTemplate feature will match your requirement. But you have enabled FrozenRows and Columns in your Sample. RowTemplate does not support Frozen values. 

So if you do not want frozen values then we suggest you to use the RowTemplate feature for you r requirement. 

Refer the below document for your reference 


we have online samples for your reference 


we have modified your sample  


Note: In rowTemplate feature you have define the styles for each cell 

Regards, 
Vignesh Natarajan  




SD Sai Durkha Prasath May 11, 2018 12:25 PM UTC

Hi, Is it possible to use AllowCellMerging in ej2?

RS Renjith Singh Rajendran Syncfusion Team May 14, 2018 06:00 AM UTC

Hi Sai, 
 
Thanks for contacting Syncfusion support, 
 
We have option to achieve the grid column spanning/merging using the queryCellInfo event. 
 
Refer the below documentation  and online sample demo link for your requirement. 
 
Documentation :  
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran.  


Loader.
Up arrow icon