merge cells

[adham80]

hi

im running merge cells on render [since i need to merge based on cell data and cell property i.e. "bgColor, font-color, icon"], mean , cells should be merge if already rendered only, [for performance issue , as i dont need to merge all columns ],
the mergeCells should execute for the first time grid was loaded / on scroll/on sort.

my question:
1.in which event should i run the merge ?
as i have the create event - which good for the first time grid loaded
but what regarding the scroll and espically sort ??
as i dont have an event "onSortEnd" or "afterSort".

i need an event that occurs/been called after render completely finished.

please note that i could not run the merge on refresh event , since we need to to call the refreshView event in order to do the merge which called the refresh event it's self.
as if i do this we will stack in a loop.

please advice..

[paramvir]

Since your merge cells logic depends upon cell data, you can run it when data is available.

e.g., if it's remote data, then you can run it in load event.

https://paramquery.com/pro/api#event-load

If your grid is sortable, then you can use sort event to refresh the merge cells.

Ex: https://paramquery.com/pro/demos/merge_cell

[adham80]

right .
my problem is that i a have a large data , 100K records.
and as i mentioned before im running the merge only for rendered cells, [for performance issue , im not going to merge the overall column].

mean, when do a sort, a new data will be rendered [during this functionality i updated the mergeCells object "code below"],

and after rendered finish, there should be an event to execute the merge functionality.
im looking up for that event . to execute :
 this.option("mergeCells", _grid._mergeCells);
  this.refreshView();






code below:
renderCell(ui) {
        let rowData = ui.rowData;
        let dataIndx = ui.dataIndx;
        let pq_style = {};
        let reOrderRowIndex = rowData.pq_order != null ? rowData.pq_order : ui.rowIndx;

        let cellConfiguration = this._grid.getConfiguration(ui.column.nameIndx,reOrderRowIndex,null);
       
        if (cellConfiguration.MERGE_ROWS){
            this.updateMergeRowsIndexes(ui.column.nameIndx,ui.rowIndx ,reOrderRowIndex, dataIndx );
        }
        // get cell format style properties
        let cellStyle = this.getCellStyle(cellConfiguration);
        cellStyle.cell_format += ui.cellData;
        pq_style.style =  cellStyle.css;

        rowData.pq_cellattr = rowData.pq_cellattr || {};
        rowData.pq_cellattr[dataIndx] = pq_style;

        return "<span class='vx-align-middle'></span>" + cellStyle.cell_format ;
    }

    updateMergeRowsIndexes (colIdx, rowIdx, reOrderRowIndex,dataIndx){
        let curCellData =  this._grid._compData.data.columns[colIdx][rowIdx];
        let prevCellData = this._grid._compData.data.columns[colIdx][rowIdx-1] !== undefined ?  this._grid._compData.data.columns[colIdx][rowIdx-1] : undefined;

        let currCellConfiguration = this._grid.getConfiguration(colIdx, reOrderRowIndex,null);
        let prevCellConfiguration = this._grid.getConfiguration(colIdx, reOrderRowIndex-1,null);

        // check current merge object position is already defined
        let currMergeObj = _.find(this._grid._mergeCells,{"rd": rowIdx-1 , "c1":dataIndx});
       
        if (prevCellData !== undefined && prevCellData == curCellData && this.isCellStyleConfigurationEquivalent(currCellConfiguration, prevCellConfiguration)){
            if (this._grid._mergeCells.length == 0 || !currMergeObj){
                    this._grid._mergeCells.push({r1: rowIdx-1, c1: dataIndx, rc: 2, cc: 1, rd:rowIdx});
                } else{
                    currMergeObj.rc ++;
                    currMergeObj.rd = rowIdx;
            }

        }
    }

[adham80]

if i run the below on Sort :
 this.option("mergeCells", _grid._mergeCells);
 this.refreshView();

data will not be merged as expected since, the _mergeCells is not updated yet.
this piece of code should execute after sort done OR render done.

[paramvir]

you can't set merge cells in render event or cell render,

please use load and sort events to set mergeCells option and let the grid worry about performance.

Please follow this example:  https://paramquery.com/pro/demos/merge_cell

and share jsfiddle/ plnkr if you face any issue.