Skip to main content

DxGridSummaryItem.Visible Property

Specifies whether a summary item is visible.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool Visible { get; set; }

Property Value

Type Default Description
Boolean true

true if the summary item is visible; otherwise, false.

Remarks

Use this property to show or hide individual summary items in code.

If you set an item’s Visible property to false, this item is removed from the GridDataColumnGroupRowTemplateContext.SummaryItems collection.

The code snippet below uses the Visible property to hide default group summaries and displays these summaries in group row tooltips instead.

    @implements IDisposable
    @inject NwindDataService NwindDataService

        <DxGrid @ref="Grid"
                Data="@Data"
                ShowGroupPanel="true"
                CustomizeElement="Grid_CustomizeElement"
                SizeMode="Params.SizeMode"
                ColumnResizeMode="GridColumnResizeMode.NextColumn" 
                TextWrapEnabled="false"
                VirtualScrollingEnabled="true">
            <Columns>
                <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                <DxGridDataColumn FieldName="City" Width="10%" />
                <DxGridDataColumn FieldName="Region" Width="10%" />
                <DxGridDataColumn FieldName="Country" Name="Country" Width="10%" GroupIndex="0" />
                <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%" />
                <DxGridDataColumn FieldName="Quantity" MinWidth="80" Width="10%" />
                <DxGridDataColumn FieldName="Total"
                                  Name="Total"
                                  UnboundType="GridUnboundColumnType.Decimal"
                                  UnboundExpression="[UnitPrice] * [Quantity]"
                                  DisplayFormat="c"
                                  MinWidth="100"
                                  Width="15%" />
            </Columns>
            <GroupSummary>
                <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Country" Visible="false" />
                <DxGridSummaryItem SummaryType="GridSummaryItemType.Sum" FieldName="Total" Visible="false" />
            </GroupSummary>
        </DxGrid>
@code {
    object Data { get; set; }
    IGrid Grid { get; set; }
    readonly TaskCompletionSource<bool> dataLoadedTcs = new(TaskCreationOptions.RunContinuationsAsynchronously);

    protected override async Task OnInitializedAsync() {
        var invoices = await NwindDataService.GetInvoicesAsync();
        var customers = await NwindDataService.GetCustomersAsync();
        Data = invoices.OrderBy(i => i.OrderDate).Join(customers, i => i.CustomerId, c => c.CustomerId, (i, c) => {
            return new {
                CompanyName = c.CompanyName,
                City = i.City,
                Region = i.Region,
                Country = i.Country,
                UnitPrice = i.UnitPrice,
                Quantity = i.Quantity
            };
        });
        dataLoadedTcs.TrySetResult(true);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await dataLoadedTcs.Task;
            Grid.ExpandGroupRow(1);
        }
    }
    void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.DataRow && (System.Decimal)e.Grid.GetRowValue(e.VisibleIndex, "Total") > 1000) {
            e.CssClass = "highlighted-item";
        }
        if(e.ElementType == GridElementType.DataCell && e.Column.Name == "Total") {
            e.Style = "font-weight: 800";
        }
        if(e.ElementType == GridElementType.GroupRow && e.Column.Name == "Country") {
            var summaryItems = e.Grid.GetGroupSummaryItems().Select(i => e.Grid.GetGroupSummaryDisplayText(i, e.VisibleIndex));
            e.Attributes["title"] = string.Join(", ", summaryItems);
        }
    }
    public void Dispose() {
        dataLoadedTcs.TrySetCanceled();
    }
}

DevExpress Blazor Grid - Summaries

Run Demo: Grid - Conditional Formatting

For more information about summaries in the Grid component, refer to the following topic: Summary in Blazor Grid.

Implements

See Also