Blazor Tree Grid Column Hiding
The Ignite UI for Blazor has a built-in column hiding UI, which can be used through the Blazor Tree Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The Blazor Tree Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and to eliminate the need for tabbing through redundant fields.
Blazor Tree Grid Column Hiding Example
Tree Grid Setup
Let's start by creating our IgbTreeGrid
and binding it to our data. We will also enable both filtering and sorting for the columns.
<IgbTreeGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
<IgbColumn Field="Name" Sortable=true Hidden=true></IgbColumn>
<IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
<IgbColumn Field="Title" Sortable=true></IgbColumn>
<IgbColumn Field="HireDate" Sortable=true></IgbColumn>
<IgbColumn Field="Age" Sortable=true></IgbColumn>
<IgbColumn Field="Address" Sortable=true></IgbColumn>
<IgbColumn Field="City" Sortable=true></IgbColumn>
<IgbColumn Field="Country" Sortable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
<IgbColumn Field="Phone" Sortable=true></IgbColumn>
</IgbTreeGrid>
Toolbar's Column Hiding UI
The built-in Column Hiding UI is placed inside an DropDown
in the IgbTreeGrid
'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 IgbGridToolbarActions
and the IgbGridToolbarHiding
inside of the IgbTreeGrid
. We will also add a title to our toolbar by using the IgbGridToolbarTitle
and a custom style for our Tree Grid's wrapper.
<IgbTreeGrid Data=northwindEmployees>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarHiding></IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
</IgbTreeGrid>
The IgbTreeGrid
provides us with some useful properties when it comes to using the toolbar's column hiding UI.
By using the Title
property, we will set the title that is displayed inside the dropdown button in the toolbar.
<IgbTreeGrid Data=northwindEmployees>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
</IgbTreeGrid>
You can see the result of the code from above at the beginning of this article in the Blazor Column Hiding Example section.
Disable hiding of a column
We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their DisableHiding
property to true.
<IgbTreeGrid Data=northwindEmployees AutoGenerate=false>
<IgbColumn Field="Name" Sortable=true DisableHiding=true></IgbColumn>
<IgbColumn Field="Title" Sortable=true DisableHiding=true></IgbColumn>
</IgbTreeGrid>
Styling
The grid could be further customized by setting some of the available CSS variables. In order to achieve that, we will use a class that we will first assign to the grid:
<IgbTreeGrid Id="treeGrid"></IgbTreeGrid>
Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions
, so the rest of the grid is unaffected:
#treeGrid {
/* Main Column Actions styles */
--ig-column-actions-background-color: #292826;
--ig-column-actions-title-color: #ffcd0f;
/* Checkbox styles */
--ig-checkbox-tick-color: #292826;
--ig-checkbox-label-color: #ffcd0f;
--ig-checkbox-empty-color: #ffcd0f;
--ig-checkbox-fill-color: #ffcd0f;
/* Input styles */
--ig-input-group-idle-text-color: white;
--ig-input-group-filled-text-color: #ffcd0f;
--ig-input-group-focused-text-color: #ffcd0f;
--ig-input-group-focused-border-color: #ffcd0f;
--ig-input-group-focused-secondary-color: #ffcd0f;
/* Buttons styles */
--ig-button-foreground: #292826;
--ig-button-background: #ffcd0f;
--ig-button-hover-background: #404040;
--ig-button-hover-foreground: #ffcd0f;
--ig-button-focus-background: #ffcd0f;
--ig-button-focus-foreground: black;
--ig-button-focus-visible-background: #ffcd0f;
--ig-button-focus-visible-foreground: black;
--ig-button-disabled-foreground: #ffcd0f;
}
Demo
API References
In this article we learned how to use the built-in column hiding UI in the IgbTreeGrid
's toolbar. The column hiding UI has a few more APIs to explore, which are listed below.
ColumnActionsComponent
Additional components with relative APIs that were used:
IgbColumn
properties:
IgbGridToolbar
properties:
showProgress
IgbGridToolbar
methods:
IgbTreeGrid
events:
ColumnVisibilityChanged
Additional Resources
Our community is active and always welcoming to new ideas.