Skip to content

Update column hiding topic for React 19 #1507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 12, 2025
Merged

Update column hiding topic for React 19 #1507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a05707d
Update column hiding topic for React 19
IMinchev64 May 2, 2025
d2a34b6
Fix dataTypes and minor adjustments
IMinchev64 May 9, 2025
f9842eb
Undo unnecessary changes
IMinchev64 May 9, 2025
8356424
docs(hiding): add status label updated for hiding topic
dkamburov May 12, 2025
48445c0
docs(hiding): add for tree-grid and hgrid as well
dkamburov May 12, 2025
7ecf6af
Merge branch 'vnext' into iminchev/column-hiding-react
dkamburov May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 57 additions & 57 deletions doc/en/components/grids/_shared/column-hiding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,17 +73,17 @@ Let's start by creating our `{ComponentName}` and binding it to our data. We wil
```

```tsx
<IgrGrid autoGenerate="false" width="100%" height="560px" allowFiltering="true">
<IgrColumn field="ID" dataType="string" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="ContactName" dataType="String" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="City" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="CompanyName" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Fax" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Address" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="PostalCode" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Country" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Phone" dataType="string" sortable="true"></IgrColumn>
<IgrGrid autoGenerate={false} data={customersData} width="100%" height="560px" allowFiltering={true}>
<IgrColumn field="ID" dataType="string" sortable={true} hidden={true}></IgrColumn>
<IgrColumn field="ContactName" dataType="string" sortable={true} hidden={true}></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="CompanyName" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrGrid>
```
<!-- ComponentEnd: Grid -->
Expand Down Expand Up @@ -138,18 +138,18 @@ Let's start by creating our `{ComponentName}` and binding it to our data. We wil
```

```tsx
<IgrTreeGrid autoGenerate="false" width="100%" height="560px" allowFiltering="true">
<IgrColumn field="Name" dataType="string" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="ID" dataType="number" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="Title" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="HireDate" dataType="date" sortable="true"></IgrColumn>
<IgrColumn field="Age" dataType="number" sortable="true"></IgrColumn>
<IgrColumn field="Address" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="City" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Country" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Fax" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="PostalCode" dataType="string" sortable="true"></IgrColumn>
<IgrColumn field="Phone" dataType="string" sortable="true"></IgrColumn>
<IgrTreeGrid autoGenerate={false} data={employeesFlatDetails} width="100%" height="560px" allowFiltering={true}>
<IgrColumn field="Name" dataType="string" sortable={true} hidden={true}></IgrColumn>
<IgrColumn field="ID" dataType="number" sortable={true} hidden={true}></IgrColumn>
<IgrColumn field="Title" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="HireDate" dataType="date" sortable={true}></IgrColumn>
<IgrColumn field="Age" dataType="number" sortable={true}></IgrColumn>
<IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrTreeGrid>
```
<!-- ComponentEnd: TreeGrid -->
Expand All @@ -176,12 +176,12 @@ Let's start by creating our `{ComponentName}` and binding it to our data. We wil
```

```tsx
<IgrHierarchicalGrid autoGenerate="false" data={this.singersData} primaryKey="ID" allowFiltering="true"ref={this.hierarchicalGrid1Ref}>
<IgrColumn field="Artist" header="Artist" dataType="String" sortable="true"></IgrColumn>
<IgrColumn field="Photo" header="Photo" dataType="Image"></IgrColumn>
<IgrColumn field="Debut" header="Debut" dataType="Number" hidden="true"></IgrColumn>
<IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="Number" sortable="true" hidden="true"></IgrColumn>
<IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="Number" sortable="true"></IgrColumn>
<IgrHierarchicalGrid autoGenerate={false} data={singersData} primaryKey="ID" allowFiltering={true} ref={hierarchicalGrid1Ref}>
<IgrColumn field="Artist" header="Artist" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
<IgrColumn field="Debut" header="Debut" dataType="number" hidden={true}></IgrColumn>
<IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="number" sortable={true} hidden={true}></IgrColumn>
<IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="number" sortable={true}></IgrColumn>
</IgrHierarchicalGrid>
```
<!-- ComponentEnd: HierarchicalGrid -->
Expand All @@ -204,7 +204,7 @@ Let's start by creating our `{ComponentName}` and binding it to our data. We wil

The built-in Column Hiding UI is placed inside an `DropDown` in the `{ComponentName}`'s toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.

For this purpose all we have to do is set both the `GridToolbarActions` and the `GridToolbarHiding` inside of the `{ComponentName}`. We will also add a title to our toolbar by using the `GridToolbarTitle` and a custom style for our {ComponentTitle}'s wrapper.
For this purpose all we have to do is set both the `GridToolbarActions` and the `GridToolbarHiding` inside of the `{ComponentName}`.

<!-- ComponentStart: Grid -->
```html
Expand Down Expand Up @@ -239,9 +239,9 @@ For this purpose all we have to do is set both the `GridToolbarActions` and the

```tsx
<IgrGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrGrid>
Expand Down Expand Up @@ -294,9 +294,9 @@ For this purpose all we have to do is set both the `GridToolbarActions` and the
<!-- ComponentStart: TreeGrid -->
```tsx
<IgrTreeGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrTreeGrid>
Expand Down Expand Up @@ -350,7 +350,7 @@ For this purpose all we have to do is set both the `GridToolbarActions` and the
<!-- React -->
<!-- ComponentStart: HierarchicalGrid -->
```tsx
<IgrHierarchicalGrid data={this.singersData}>
<IgrHierarchicalGrid>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding></IgrGridToolbarHiding>
Expand Down Expand Up @@ -398,11 +398,11 @@ By using the `Title` property, we will set the title that is displayed inside th

```tsx
<IgrGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrGridToolbar>
</IgrGrid>
```
<!-- ComponentEnd: Grid -->
Expand Down Expand Up @@ -453,9 +453,9 @@ By using the `Title` property, we will set the title that is displayed inside th
<!-- ComponentStart: TreeGrid -->
```tsx
<IgrTreeGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrTreeGrid>
Expand Down Expand Up @@ -509,9 +509,9 @@ By using the `Title` property, we will set the title that is displayed inside th
<!-- ComponentStart: HierarchicalGrid -->
```tsx
<IgrHierarchicalGrid>
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
</IgrGridToolbarActions>
</IgrGridToolbar>
</IgrHierarchicalGrid>
Expand Down Expand Up @@ -696,8 +696,8 @@ We can easily prevent the user from being able to hide columns through the colum

```tsx
<IgrGrid>
<IgrColumn field="ContactName" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="ContactName" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
<IgrColumn field="ContactTitle" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrGrid>
```

Expand Down Expand Up @@ -726,8 +726,8 @@ We can easily prevent the user from being able to hide columns through the colum

```tsx
<IgrTreeGrid>
<IgrColumn field="Name" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="Title" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="Name" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
<IgrColumn field="Title" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrTreeGrid>
```

Expand Down Expand Up @@ -764,11 +764,11 @@ We can easily prevent the user from being able to hide columns through the colum

```tsx
<IgrHierarchicalGrid>
<IgrColumn field="Artist" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="GrammyAwards" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="Artist" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
<IgrColumn field="GrammyAwards" dataType="string" sortable={true} disableHiding={true}></IgrColumn>

<IgrRowIsland>
<IgrColumn field="Album" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
<IgrColumn field="Album" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrRowIsland>
</IgrHierarchicalGrid>
```
Expand Down Expand Up @@ -965,7 +965,7 @@ In order to achieve that, we will use a class that we will first assign to the g
```

```tsx
<{ComponentSelector} id="treeGrid"></{ComponentSelector}>
<{ComponentSelector} className="tree-grid"></{ComponentSelector}>
```
<!-- ComponentEnd: TreeGrid -->

Expand Down Expand Up @@ -1021,7 +1021,7 @@ Then set the related CSS variables for the related components. We will apply the

<!-- ComponentStart: TreeGrid -->
```css
#treeGrid {
.tree-grid {
/* Main Column Actions styles */
--ig-column-actions-background-color: #292826;
--ig-column-actions-title-color: #ffcd0f;
Expand Down Expand Up @@ -1055,7 +1055,7 @@ Then set the related CSS variables for the related components. We will apply the

<!-- ComponentStart: HierarchicalGrid -->
```css
#hierarchicalGrid {
.hierarchical-grid {
/* Main Column Actions styles */
--ig-column-actions-background-color: #292826;
--ig-column-actions-title-color: #ffcd0f;
Expand Down
9 changes: 6 additions & 3 deletions docfx/en/components/toc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@
{
"exclude": ["Angular"],
"name": "Column Hiding",
"href": "grids/grid/column-hiding.md"
"href": "grids/grid/column-hiding.md",
"status": ["UPDATED_REACT"]
},
{
"exclude": ["Angular"],
Expand Down Expand Up @@ -403,7 +404,8 @@
{
"exclude": ["Angular"],
"name": "Column Hiding",
"href": "grids/hierarchical-grid/column-hiding.md"
"href": "grids/hierarchical-grid/column-hiding.md",
"status": ["UPDATED_REACT"]
},
{
"exclude": ["Angular"],
Expand Down Expand Up @@ -639,7 +641,8 @@
{
"exclude": ["Angular"],
"name": "Column Hiding",
"href": "grids/tree-grid/column-hiding.md"
"href": "grids/tree-grid/column-hiding.md",
"status": ["UPDATED_REACT"]
},
{
"exclude": ["Angular", "React"],
Expand Down