From b2a846edd64ae0ce134bfbc5776af51f69f03809 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 15 Oct 2025 15:05:49 +0300 Subject: [PATCH] feat(column-pinning): update snippets and add both side pinning in React --- .../grids/_shared/column-pinning.md | 115 +++++++++++++++++- docfx/en/components/toc.json | 4 +- 2 files changed, 113 insertions(+), 6 deletions(-) diff --git a/doc/en/components/grids/_shared/column-pinning.md b/doc/en/components/grids/_shared/column-pinning.md index 12c0a3eb5..c08638a5d 100644 --- a/doc/en/components/grids/_shared/column-pinning.md +++ b/doc/en/components/grids/_shared/column-pinning.md @@ -10,7 +10,7 @@ _canonicalLink: {CanonicalLinkToGridColumnPinning} # {Platform} {ComponentTitle} Column Pinning -The {ProductName} Column Pinning feature in {Platform} {ComponentTitle} enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the `Grid`. There’s an integrated UI for Column Pinning, accessible via the {Platform} {ComponentTitle} toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns. +The {ProductName} Column Pinning feature in {Platform} {ComponentTitle} enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the `{ComponentName}`. There’s an integrated UI for Column Pinning, accessible via the {Platform} {ComponentTitle} toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns. ## {Platform} {ComponentTitle} Column Pinning Example @@ -86,6 +86,15 @@ constructor() { ``` + +```tsx +<{ComponentName} data={nwindData} autoGenerate={false}> + + + + +``` + @@ -103,6 +112,15 @@ constructor() { ``` + +```tsx +<{ComponentName} data={nwindData} autoGenerate={false}> + + + + +``` + You may also use the `{ComponentName}`'s `PinColumn` or `UnpinColumn` methods of the `{ComponentName}` to pin or unpin columns by their field name: @@ -133,17 +151,30 @@ gridRef.current.unpinColumn('Name'); + ```typescript this.treeGrid.pinColumn('Title'); this.treeGrid.unpinColumn('Name'); ``` + + +```tsx +gridRef.current.pinColumn('Title'); +gridRef.current.unpinColumn('Name'); +``` + ```typescript this.hierarchicalGrid.pinColumn('Artist'); this.hierarchicalGrid.unpinColumn('Debut'); ``` + +```tsx +gridRef.current.pinColumn('Artist'); +gridRef.current.unpinColumn('Debut'); +``` Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. @@ -250,7 +281,7 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; ``` ```tsx - +<{ComponentSelector} data={nwindData} autoGenerate={true} pinning={pinningConfig}> ``` @@ -268,6 +299,14 @@ const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End }; `sample="/{ComponentSample}/column-pinning-right-side", height="510", alt="{Platform} {ComponentTitle} column pinning right side"` + +Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo bellow for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added ot the toolbar, or simply drag a column to another pinned one. + +### Demo + +`sample="/{ComponentSample}/column-pinning-both-sides", height="510", alt="{Platform} {ComponentTitle} column pinning both sides"` + + ## Custom Column Pinning UI @@ -530,6 +569,40 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { `; }, false); ``` + +```tsx +<{ComponentSelector} autoGenerate={false} data={CustomersData} ref={grid}> + + + + + + + + +``` + +```tsx +const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { + const togglePin = () => { + const col = ctx.column; + col.pinned = !col.pinned; + } + + const col = ctx.column; + + return( +
+ {col.header} + togglePin()}>📌 +
+ ); +} +``` + @@ -609,6 +682,40 @@ public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => { `; } ``` + +```tsx +<{ComponentSelector} autoGenerate={false} data={HierarchicalCustomersData} ref={grid}> + + + + + + + + +``` + +```tsx +const toggleColumnPin = (ctx: IgrColumnTemplateContext) => { + const togglePin = () => { + const col = ctx.column; + col.pinned = !col.pinned; + } + + const col = ctx.column; + + return( +
+ {col.header} + togglePin()}>📌 +
+ ); +} +``` + On click of the custom icon the pin state of the related column can be changed using the column's API methods. @@ -787,7 +894,7 @@ Then set the related CSS properties to this class: * `Column` ## Additional Resources - + * [Virtualization and Performance](virtualization.md) * [Paging](paging.md) * [Filtering](filtering.md) @@ -796,7 +903,7 @@ Then set the related CSS properties to this class: * [Column Moving](column-moving.md) * [Column Resizing](column-resizing.md) * [Selection](selection.md) - + Our community is active and always welcoming to new ideas. diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index c775c0c66..b9cb2c1bb 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -413,7 +413,7 @@ "href": "grids/hierarchical-grid/column-moving.md" }, { - "exclude": ["Angular", "Blazor", "React", "WebComponents"], + "exclude": ["Angular"], "name": "Column Pinning", "href": "grids/hierarchical-grid/column-pinning.md" }, @@ -650,7 +650,7 @@ "href": "grids/tree-grid/column-moving.md" }, { - "exclude": ["Angular", "React"], + "exclude": ["Angular"], "name": "Column Pinning", "href": "grids/tree-grid/column-pinning.md", "status": ["NEW_REACT"]