Print Page - Freeze current column

Would it be possible using the context menu to freeze current column? And then having a "unfreeze option"?

you mean Pin column?

Please use this contextMenu definition.

            contextMenu: {
                on: true,
                cellItems(evt, ui) {
                    let col = ui.column;

                    if (col.originalColIndx) {
                        return [
                            {
                                name: 'Un Pin Column',
                                action(evt, ui) {
                                    let col = ui.column, ci = ui.colIndx,
                                        fc = (this.option('freezeCols') || 0) * 1;

                                    this.Columns().move(1, ci, col.originalColIndx + 1);
                                    delete col.originalColIndx;
                                    this.option('freezeCols', fc - 1);
                                    this.refresh();
                                }
                            }
                        ];
                    }
                    else {
                        return [
                            {
                                name: 'Pin Column',
                                action(evt, ui) {
                                    
                                    let col = ui.column, ci = ui.colIndx,
                                        fc = (this.option('freezeCols') || 0) * 1;
                                    col.originalColIndx = ci;
                                    this.Columns().move(1, ci, fc);
                                    this.option('freezeCols', 1 + fc);
                                    this.refresh();
                                }
                            }
                        ];
                    }
                }
            },

Thanks, seems work to but after you pinned a column then use show or hide columns the pinning is lost.

For freeze visible columns I need to combine hideCols events:

Code: [Select]

//this event is used to refresh freezeCols option
            hideCols: function() {
        var total = visibleToTotal(this.getColModel(), visibleColumns);
        this.option("freezeCols", total);
        this.refresh();
    },

to my existing hidecols event:

Code: [Select]

hideCols: function(evt, ui) {
          var grid = this, requireRefresh;
          ui.diHide.forEach(function(di) {	
            var col = grid.getColumn({ dataIndx: di });
            if (col.filter && col.filter.crules) {
              col.filter.crules.forEach(function(rule) {
                if (rule.value != undefined || rule.value2 != undefined) {
                  requireRefresh = true;
                  rule.value = rule.value2 = undefined; //clear the values while keep the filter conditions.
                }
              });
            }
          });
          if (requireRefresh) grid.filter(); //refresh filter.
        },

Can i just merge them after each other or will it cause any issues?

you can merge the first one into 2nd one

Code: [Select]

....
  // --- Refresh freezeCols after hiding ---
  var total = visibleToTotal(grid.getColModel(), visibleColumns);
  grid.option("freezeCols", total);

// --- Refresh filter if needed ---
  if (requireRefresh) {
    grid.filter();
  }
  else{
     grid.refresh();
  }

Thanks. Regarding pin column from context menu. I use the following code to the change background of the pinned column:

Code: [Select]

ui.column.style = { 'background-color': '#0027ff1f' }
in the action event. Works, but is that the recommended way?

Also if you load a state after you pinned a column the pinning seems to be lost. How can I address that so it keeps the pinning?

1) That's fine.

2) Pinned columns have additional property: originalColIndx

Add it along with column state by adding originalColIndx to stateColKeys

https://paramquery.com/pro/api#option-stateColKeys

Code: [Select]

stateColKeys : { originalColIndx: 1 }

After modifying a state the column is pinned but context menu says 'Pin column' and coloring is lost. How can I solve that so that information is stored as well in the state?

1) Either column.style can also be added to state via stateColKeys (more maintenance work )

2) or column.style can be made dependent upon pinned column via columnTemplate

Code: [Select]

            columnTemplate: {
                //style pinned columns differently.
                get style() {
                    if (this.originalColIndx) {
                        return  { 'background-color': '#0027ff1f' }
                    }
                }
            },

I've updated this example with above code: https://paramquery.com/pro/demos/grid_state

ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on October 02, 2025, 07:23:38 pm