Blazor Tree Grid Size

The Ignite UI for Blazor Size feature in Blazor Tree Grid allows users to control the spacing and layout of data within the IgbTreeGrid. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:

• --ig-size-large
• --ig-size-medium
• --ig-size-small

Blazor Tree Grid Size Example

Usage

As you can see in the demo above, the IgbTreeGrid provides three size options: small, medium and large. The code snippet below shows how to set --ig-size either inline or part of a CSS class:

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<IgbTreeGrid Class="gridSize" Data=northwindEmployees @ref=grid>
</IgbTreeGrid>

And now let’s see in details how each option reflects on the IgbTreeGrid component. When you switch between different size options the height of each IgbTreeGrid element and the corresponding paddings will be changed. Also if you want to apply custom column IgbTreeGrid.Width, please consider the fact that it must be bigger than the sum of left and right padding:

• large - this is the default IgbTreeGrid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column IgbTreeGrid.Width is 80px;
• medium - this is the middle intense size with 40px row height. Left and Right paddings are 16px; Minimal column IgbTreeGrid.Width is 64px;
• small - this is the size with highest intense and 32px row height. Left and Right paddings are 12px; Minimal column IgbTreeGrid.Width is 56px;

Let’s now continue with our sample and see in action how the --ig-size is applied. Let’s first add a button which will help us to switch between each size:

<div class="options vertical">
    <IgbPropertyEditorPanel
    DescriptionType="WebTreeGrid"
    IsHorizontal="true"
    IsWrappingEnabled="true"
    Name="PropertyEditor"
    @ref="propertyEditor">
        <IgbPropertyEditorPropertyDescription
        Name="SizeEditor"
        @ref="sizeEditor"
        Label="Grid Size:"
        ValueType="PropertyEditorValueType.EnumValue"
        DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
        DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
        ChangedScript="WebGridSetGridSize">
        </IgbPropertyEditorPropertyDescription>
    </IgbPropertyEditorPanel>
</div>

Now we can add the markup.

<IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Id="grid" Data="EmployeesFlatDetails" PrimaryKey="ID"
 ForeignKey="ParentID" AllowFiltering="true">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true" Width="200">
    </IgbColumn>
    <IgbColumnGroup Header="General Information">
        <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable="true" HasSummary="true">
        </IgbColumn>
        <IgbColumnGroup Header="Personal Details">
            <IgbColumn Field="ID" DataType="GridColumnDataType.Number" Filterable="false">
            </IgbColumn>
            <IgbColumn Field="Title" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
            <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable="true" HasSummary="true" Filterable="false">
            </IgbColumn>
        </IgbColumnGroup>
    </IgbColumnGroup>
    <IgbColumnGroup Header="Address Information">
        <IgbColumnGroup Header="Location">
            <IgbColumn Field="Country" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
            <IgbColumn Field="City" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
            <IgbColumn Field="Address" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
        </IgbColumnGroup>
        <IgbColumnGroup Header="Contact Information">
            <IgbColumn Field="Phone" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
            <IgbColumn Field="Fax" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
            <IgbColumn Field="PostalCode" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true">
            </IgbColumn>
        </IgbColumnGroup>
    </IgbColumnGroup>
</IgbTreeGrid>

Finally, let’s provide the necessary logic in order to actually apply the size:

// In JavaScript
    igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => {
        var newVal = evtArgs.newValue.toLowerCase();
        var grid = document.getElementById("grid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }, false);

Another option that IgbTreeGrid provides for you, in order to be able to change the height of the rows in the IgbTreeGrid, is the property IgbTreeGrid.RowHeight. So let’s see in action how this property affects the IgbTreeGrid layout along with the --ig-size.

Please keep in mind the following:

• --ig-size CSS variable will have no impact on row height if there is IgbTreeGrid.RowHeight specified.
• --ig-size will affect all of the rest elements in the Tree Grid, as it has been described above.

We can now extend our sample and add IgbTreeGrid.RowHeight property to the IgbTreeGrid:

<IgbTreeGrid
   @ref="grid"
   Id="grid"
   Class="gridSize"
   Width="100%"
   Height="100%"
   AutoGenerate="true"
   Data="northwindEmployees"
   RowHeight="rowHeight">
</IgbTreeGrid>

@code {
   private string rowHeight = "80px";
}

API References

Additional Resources

• Virtualization and Performance

• Editing

• Paging

• Filtering

• Sorting

• Summaries

• Column Pinning

• Column Resizing

• Selection

• Searching

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub