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

[John Chellah]

Hello,

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.

Thanks,

John

[Madhu Sudhanan P]

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. 

https://ej2.syncfusion.com/beta/javascript/demos/#/material/grid/row-spanning.html 

https://ej2.syncfusion.com/javascript/documentation/grid/columns/#column-spanning 

Regards, 

Madhu Sudhanan P 

[John Chellah]

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.

Thanks

John

[Thavasianand Sankaranarayanan]

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. 

 

[index.js] 

 

var old = ej.grids.Data.prototype.generateQuery; 

ej.grids.Data.prototype.generateQuery = function() { 

  var query = old.call(this, true); 

  this.pageQuery(query); 

  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) { 

                grid.groupColumn('Country'); 

                refresh = false; 

            } 

        }, 

    }); 

    grid.appendTo('#Grid'); 

 

 

 

We have prepared a sample in the following link. 

 

Sample: https://stackblitz.com/edit/w5ed8e?file=index.js 

 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/documentation/api/grid/#databound 

 

Link: https://ej2.syncfusion.com/documentation/api/grid/#load 

 

Regards, 

Thavasianand S. 

[John Chellah]

Thank you very much!!!

[Madhu Sudhanan P]

Hi John, 

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

Regards, 

Madhu