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 cafa01cee..688186e2a 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"]