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

John Chellah

Asked On December 13, 2018 09:25 AM UTC

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

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

John Chellah

Replied On 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.

Thanks

John

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On 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.

[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.

Reply | Reply with quote

John Chellah

Replied On January 27, 2019 11:08 AM UTC

Thank you very much!!!

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On January 28, 2019 04:13 AM UTC

Hi John,

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

Regards,

Madhu

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
141474	Dec 13,2018 09:25 AM UTC	Jan 28,2019 04:13 AM UTC	JavaScript - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US