Author Topic: merge cells  (Read 3906 times)

adham80

  • Newbie
  • *
  • Posts: 11
    • View Profile
merge cells
« on: October 16, 2018, 04:41:13 pm »
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..
« Last Edit: October 16, 2018, 04:55:35 pm by adham80 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5791
    • View Profile
Re: merge cells
« Reply #1 on: October 16, 2018, 04:56:30 pm »
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
« Last Edit: October 16, 2018, 05:17:59 pm by paramquery »

adham80

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: merge cells
« Reply #2 on: October 16, 2018, 05:33:20 pm »
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

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: merge cells
« Reply #3 on: October 16, 2018, 05:39:53 pm »
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.
« Last Edit: October 16, 2018, 05:59:53 pm by adham80 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5791
    • View Profile
Re: merge cells
« Reply #4 on: October 16, 2018, 06:03:46 pm »
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.