Blazor Hierarchical Grid Toolbar

    The Ignite UI for Blazor Toolbar in is a container for UI operations in the Blazor Hierarchical Grid. The Blazor toolbar is located at the top of the Blazor component, i.e., the IgbHierarchicalGrid and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Blazor Hierarchical Grid includes:

    • Column Hiding
    • Column Pinning
    • Excel Exporting
    • Advanced Filtering

    The toolbar and the predefined UI components support Blazor events and expose API for developers.

    The predefined IgbGridToolbarActions and IgbGridToolbarTitle UI components are added inside the IgbGridToolbar and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

    <IgbHierarchicalGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>Hierarchical Grid Toolbar</IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
            <IgbGridToolbarPinning></IgbGridToolbarPinning>
            <IgbGridToolbarExporter></IgbGridToolbarExporter>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

    As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgbGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

    Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:

    <IgbHierarchicalGrid>
    <IgbGridToolbar>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

    For a comprehensive look over each of the default UI components, continue reading the Features section below.

    Features

    The toolbar is great at separating logic/interactions which affects the grid as a whole.

    As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid.

    These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Blazor suite.

    Listed below are the main features of the toolbar with example code for each of them.

    Title

    Setting a title for the toolbar in your grid is achieved by using the IgbGridToolbarTitle.

    Users can provide anything from simple text to more involved templates.

    <IgbGridToolbar>
    <IgbGridToolbarTitle>Grid toolbar title</IgbGridToolbarTitle>
</IgbGridToolbar>
razor

    Actions

    The IgbGridToolbarActions is where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

    <IgbGridToolbar>
    <IgbGridToolbarActions>
        <!--...-->
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

    Column Pinning

    The IgbGridToolbarPinning component provides the default UI for interacting with column pinning in the grid.

    The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

    <IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarPinning Title="Grid pinned columns" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarPinning>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

    Column Hiding

    The IgbGridToolbarHiding provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

    <IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarHiding Title="Grid column hiding" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarHiding>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

    Advanced Filtering

    Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button.

    <IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

    Data Exporting

    When exporting the IgbHierarchicalGrid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data).

    As with the rest of the toolbar actions, exporting is provided through a IgbGridToolbarExporter out of the box.

    The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience.

    These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter.

    Here is a snippet showing some of the options which can be customized through the Blazor template:

    <IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarExporter ExportCSV="true" ExportExcel="true" Filename="exported_data"></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

    In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

    By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

    The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:

    <IgbHierarchicalGrid ToolbarExportingScript="ConfigureExport"></IgbHierarchicalGrid>

// In Javascript
igRegisterScript("ConfigureExport", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Photo';
    });
}, false);
razor

    The following sample demonstrates how to customize the exported files:

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    Exporting Indicator

    When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress.

    Moreover, users can set the toolbar ShowProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

    The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid:

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Custom Content

    If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable.

    Here is a sample snippet:

    <IgbHierarchicalGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>title</IgbGridToolbarTitle>
        @*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        *@
        <IgbGridToolbarActions>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

    The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Styling

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

    <IgbHierarchicalGrid class="grid"></IgbHierarchicalGrid>
razor

    Then set the related CSS properties for that class:

    .grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css

    Demo

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Known Limitations

    Currently, defining a toolbar component directly inside the IgbRowIsland is not supported. Use the ToolbarTemplate property instead.

    API References

    The Grid Toolbar service has a few more APIs to explore, which are listed below.

    IgbHierarchicalGrid Events:

    • ToolbarExporting

    Additional Resources

    Our community is active and always welcoming to new ideas.