merge cell on colspan

[Marco Giorgi]

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

[Vignesh Natarajan]

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. 

 

Sample: http://jsplayground.syncfusion.com/gkvv5s4b  

 

We have online sample for your requirement  

 

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/cellmerging  

 

Refer our online documentation for your reference 

 

https://help.syncfusion.com/js/grid/cell#cell-merging  

https://help.syncfusion.com/api/js/ejgrid#events:mergecellinfo  

 

Regards, 

Vignesh Natarajan 

 

[Marco Giorgi]

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

[Vignesh Natarajan]

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 

https://help.syncfusion.com/js/grid/row#row-template  

we have online samples for your reference 

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/rows/rowtemplate  

we have modified your sample  

Sample:  http://jsplayground.syncfusion.com/1uuv5kqi  

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

Regards, 

Vignesh Natarajan  

[Sai Durkha Prasath]

Hi, Is it possible to use AllowCellMerging in ej2?

[Renjith Singh Rajendran]

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 :  

https://ej2.syncfusion.com/16.1.37/documentation/grid/columns.html?lang=typescript#column-spanning 

https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#querycellinfo 

 

Demo link: https://ej2.syncfusion.com/16.1.37/demos/#/material/grid/columnspanning.html 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith Singh Rajendran.