Expand All

Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export

Layouts

RTL Layout

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

📊 jQuery Grid (pqGrid) – Column Selection Features

pqGrid supports Excel-like column selection that allows users to interact with entire columns of data.
Columns can be selected via mouse, keyboard shortcuts, or API methods.


🔹 User Interaction (Mouse & Keyboard)

  • Single Column Selection
    • Click on a column header to select the entire column.
  • Multiple Non-Contiguous Columns
    • Hold Ctrl (Windows) or Cmd (Mac) and click on multiple column headers.
  • Contiguous Column Selection
    • Hold Shift and click between two column headers to select all columns in between.
  • Copy & Cut
    • Ctrl + C → Copy selected columns.
    • Ctrl + X → Cut selected columns.

🔹 Programmatic Column Selection (API)

pqGrid provides API methods to select and manipulate columns programmatically:

  • select({ colIndx }) → Select a specific column by index.
  • range({ c1, c2 }) → Select a contiguous range of columns.
  • getSelection() → Retrieve currently selected columns.
  • removeSelection() → Clear column selection.

🔹 Range Object for Columns

The Range API can be applied to columns:

  • Properties:
    • c1 → Starting column index
    • c2 → Ending column index
    • cc → Column count
  • Example:
    // Selects columns from index 1 to 3
    grid.Range({ c1: 1, c2: 3 }).select(); 
    
    

selectChange Event: