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. Image for the cookie policy date

Merge Column, Row or Cell in Essential 2 Grid [Essential JS 2 for JavaScript (ES5)]


is it possible to merge a column, a row or a cell in the grid control (like essential 1)?

I'm using the detailTemplate and in my detailTemplate I'm rendering another syncfusion grid. But I need to merge rows, columns or cells of the main Row to avoid duplicate rows/information.

Maybe there is another way to realize this, but I need to know if it is possible to merge something in essential 2 grid control.


5 Replies

MS Madhu Sudhanan P Syncfusion Team December 14, 2018 03:59 AM UTC

Hi John, 

Thanks for contacting Syncfusion support. 

You can merge cells and rows by using the queryCellInfo event. Please refer to the below link for merging rows and cells. 

Madhu Sudhanan P 

JC John Chellah December 14, 2018 08:13 AM UTC

Hello Madhu,

thank you for your fast answer. That might be very useful. 

Is this only a function of the beta version? Because if so can you tell me when this version is ready?

Another question:

If I have grouped rows in my grid, how can I decide how much grouped rows are shown each page.
Because pageSize from "pageSettings: { pageSize: 15, pageCount: 30 }" only counts the rows per group.
With "pageSize: 15" I want to display 15 groups.


TS Thavasianand Sankaranarayanan Syncfusion Team December 17, 2018 11:54 AM UTC

Hi John, 
Thanks for your update. 
Query 1: Can you tell me when this version is ready? 
The documentation for row-spanning  will be included in our Volume 4 main release, which will be rolled out with in this week of December, 2018.  
Query 2: Need to set the grouped rows as pageSize. 
Based on your given detail we suspect that you want to show the grouped column rows based on the pageSize in Grid. We can achieve your requirement by using the below code example. 
var old = ej.grids.Data.prototype.generateQuery; 
ej.grids.Data.prototype.generateQuery = function() { 
  var query = old.call(this, true); 
  return query; 
var refresh; 
    var grid = new ej.grids.Grid({ 
        dataSource: window.inventoryData, 
        allowPaging: true, 
        allowSorting: true, 
        allowGrouping: true, 
        groupSettings: { columns: ['Country'] }, 
        height: 400, 
        columns: [ 
            { field: 'Inventor', headerText: 'Inventor Name', width: 160 }, 
            { field: 'NumberofPatentFamilies', headerText: 'No of Patent Families', width: 195, textAlign: 'Right' }, 
            { field: 'Country', headerText: 'Country', width: 120 }, 
            { field: 'Active', headerText: 'Active', width: 120 }, 
            { field: 'Mainfieldsofinvention', headerText: 'Main fields of invention', width: 200 }, 
        pageSettings: { pageCount: 5, pageSize: 5 }, 
        load: function() { 
            refresh = grid.refreshing; 
        dataBound: function() { 
            if (refresh) { 
                refresh = false; 
We have prepared a sample in the following link. 
Refer the help documentation. 
Thavasianand S. 

JC John Chellah January 27, 2019 11:08 AM UTC

Thank you very much!!!

MS Madhu Sudhanan P Syncfusion Team January 28, 2019 04:13 AM UTC

Hi John, 
Thanks for the update. Please get back to us if you need further assistance. 

Live Chat Icon For mobile
Up arrow icon