Blazor Tree Grid Example - Show or Hide Column
Click the switch to toggle visibility
Task ID Press Enter to sort. Press Alt Down to open filter Menu | Task Name Press Enter to sort. Press Alt Down to open filter Menu | Start Date Press Enter to sort. Press Alt Down to open filter Menu | Duration(days) Press Enter to sort. Press Alt Down to open filter Menu | Progress Press Enter to sort. Press Alt Down to open filter Menu | Priority Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 1000 | Customer Portal Redesign | 1/21/2025 | 99 | In Progress | Critical |
| 1001 | Authentication & Login Flow | 1/26/2025 | 28 | Open | Critical |
| 1002 | Analysis of login flow | 1/29/2025 | 4 | In Progress | Critical |
| 1003 | Implement OAuth2/SSO | 1/30/2025 | 9 | Open | High |
| 1004 | Unit Tests for Login | 1/29/2025 | 9 | In Progress | Critical |
| 1005 | Error Handling for Failed Login | 1/27/2025 | 6 | Open | High |
| 1006 | User Profile Management | 2/3/2025 | 20 | Open | High |
| 1007 | Profile CRUD Operations | 2/6/2025 | 6 | In Progress | Critical |
| 1008 | Validation Rules | 2/7/2025 | 8 | Open | High |
| 1009 | Integration with DB | 2/6/2025 | 6 | Open | High |
| 1010 | Dashboard UI Layout | 1/26/2025 | 23 | Open | High |
| 1011 | Wireframe Design | 1/28/2025 | 4 | In Progress | Critical |
| 1012 | Frontend Implementation | 1/28/2025 | 13 | Open | High |
| 1013 | Accessibility Review | 1/26/2025 | 6 | Open | High |
| 1014 | Notification Center | 1/30/2025 | 20 | Open | High |
| 1015 | Email Alerts | 2/1/2025 | 5 | In Progress | Critical |
| 1016 | Push Notifications | 2/2/2025 | 12 | Open | High |
| 1017 | Error Logging | 1/30/2025 | 3 | Open | High |
| 1018 | Accessibility Compliance | 2/2/2025 | 10 | Open | High |
| 1019 | WCAG Audit | 2/4/2025 | 3 | In Progress | Critical |
| 1020 | Keyboard Navigation | 2/3/2025 | 4 | Open | High |
| 1021 | Screen Reader Support | 2/3/2025 | 3 | Open | High |
| 1022 | Mobile App v2 Development | 10/2/2025 | 75 | In Progress | Critical |
| 1023 | Push Notification Service | 10/10/2025 | 34 | Open | High |
| 1024 | Setup Firebase/APNS | 10/13/2025 | 8 | In Progress | Critical |
| 1025 | Integration Tests | 10/10/2025 | 13 | Open | High |
| 1026 | Retry Logic | 10/12/2025 | 13 | Open | High |
| 1027 | Offline Data Sync | 10/12/2025 | 16 | Open | High |
| 1028 | Local Storage Setup | 10/16/2025 | 7 | In Progress | Critical |
| 1029 | Conflict Resolution | 10/14/2025 | 4 | Open | High |
| 1030 | Sync Scheduler | 10/15/2025 | 5 | Open | High |
| 1031 | Payment Gateway Integration | 10/5/2025 | 32 | Open | Critical |
| 1032 | Integrate Stripe/PayPal | 10/8/2025 | 12 | In Progress | Critical |
| 1033 | Transaction Logging | 10/8/2025 | 9 | Open | High |
| 1034 | Fraud Detection | 10/9/2025 | 11 | In Progress | Critical |
| 1035 | App Security Enhancements | 10/5/2025 | 15 | Open | Critical |
| 1036 | Encryption Setup | 10/6/2025 | 6 | In Progress | Critical |
| 1037 | Penetration Testing | 10/6/2025 | 4 | Open | High |
| 1038 | Secure Storage | 10/7/2025 | 5 | In Progress | Critical |
| 1039 | Data Analytics Dashboard | 3/17/2025 | 80 | In Progress | Critical |
| 1040 | Chart Rendering Engine | 3/22/2025 | 19 | Open | High |
| 1041 | Implement ChartJS | 3/26/2025 | 5 | In Progress | Critical |
| 1042 | Performance Optimization | 3/26/2025 | 3 | Open | High |
| 1043 | Unit Tests | 3/26/2025 | 11 | Open | High |
| 1044 | Filter & Query Logic | 3/29/2025 | 23 | Open | High |
| 1045 | Dynamic Filters | 4/1/2025 | 9 | In Progress | Critical |
| 1046 | SQL Optimization | 3/31/2025 | 6 | Open | High |
| 1047 | Validation | 3/30/2025 | 8 | Open | High |
| 1048 | Export to Excel/PDF | 3/23/2025 | 26 | Open | High |
This sample demonstrates the dynamic show/hide columns functionality in Tree Grid. Click the toggle switches in this demo to change the visibility of specific columns.
Columns in Tree Grid can be shown or hidden dynamically at runtime, and this functionality is achieved using the ShowColumnsAsync and HideColumnsAsync methods of the Tree Grid. The visibility of a column can also be controlled initially using the Visible property of the column definition. Setting this property to false hides the column during initial rendering.
In this demo, toggle switches are provided to dynamically show or hide the "Task ID", "Progress", and "Duration" columns using the ShowColumnsAsync and HideColumnsAsync methods.
More information about showing or hiding columns can be found in this documentation section.