Hi Yongfang,
Thanks for contacting Syncfusion support.
We have analyzed your query and we found that you want to merge the rows. Please set the AllowCellMerging property as true before merging the rows. We have achieved your requirement by using MergeCellInfo event and rowMerge method of the grid. We have also prepared the sample with your requirement.
Please refer the following code example:
|
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div>
<ej:Grid ID="FlatGrid" runat="server" AllowCellMerging="true" AllowSorting="True" AllowPaging="True" IsResponsive="true">
.....
<ClientSideEvents MergeCellInfo ="cellmerge" />
</ej:Grid>
</div>
<script>
function cellmerge(args) {
if (args.column.field == "ShipCity" && !$(args.cell).hasClass("e-merged")) {
var rowInx = this.getIndexByRow(args.cell.closest("tr"));
var merInx = rowInx;
var pageSize = this.model.currentViewData.length;
var prevRow = null, nexRow = null;
var data = ej.DataManager(this.model.currentViewData).executeLocal(new ej.Query().where("ShipCity", "equal", args.data["ShipCity"]));
for (var inx = 0; inx < data.length; inx++) {
var currentdata = this.model.currentViewData;
if (currentdata.indexOf(data[inx]) == merInx)
continue;
else if (merInx + 1 == currentdata.indexOf(data[inx]))
merInx++;
else break;
}
if (rowInx != merInx)
args.rowMerge(merInx - rowInx + 1);
}
}
</script>
</asp:Content> |
In this code example we have used currentViewData of the grid to collect the duplicate values from the grid. Based on this duplicate value we have merged the rows by using rowMerge method.
Please refer the following link to sample:
Please refer the following link to know about allowCellMerging Property:
Please refer the following link to know about MergeCellInfo event:
Regards,
Kuralarasan M.
