Blazor コントロール
セルの結合
コントロール > FlexGrid > セル > セルの結合

FlexGrid supports cell merging where data across rows or columns can be automatically merged. Cells can even be merged in both directions if the data values are the same.

To enable cell merging, set the GridAllowMerging enumeration of the FlexGrid to indicate what part or parts of the grid you want to merge like on specific row and column objects. Using GridAllowMerging you can set the values to Cells, ColumnHeaders, RowHeaders, AllHeaders, All, or None.

The following image shows how the FlexGrid appears after setting the AllowMerging property to All.

Cell merging

The following example demonstrate how to enable Merging in the FlexGrid.

Razor
コードのコピー 
@using C1.Blazor.Core
@using C1.Blazor.Grid

<FlexGrid @ref="grid" IsReadOnly="true" MinColumnWidth="80" DefaultColumnWidth="GridLength.Star" AllowMerging="GridAllowMerging.All" HeadersVisibility="GridHeadersVisibility.All" RowHeaderGridLinesVisibility="GridLinesVisibility.All" GridLinesVisibility="GridLinesVisibility.All" SelectionMode="GridSelectionMode.CellRange" Style="@("border: 1px solid #C7C7CC;border-radius: 8px;")">
    <FlexGridColumns>
        <GridColumn Header="Monday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Tuesday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Wednesday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Thursday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Friday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Saturday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
        <GridColumn Header="Snday" AllowMerging="true" HeaderHorizontalAlignment="C1HorizontalAlignment.Center" HorizontalAlignment="C1HorizontalAlignment.Center" />
    </FlexGridColumns>
    <FlexGridRowHeaderColumns>
        <GridColumn Width="70" />
    </FlexGridRowHeaderColumns>
    <FlexGridColumnHeaderRows>
        <GridRow AllowMerging="true" />
        <GridRow />
    </FlexGridColumnHeaderRows>
    <FlexGridRows>
        <GridRow />
        <GridRow />
        <GridRow />
        <GridRow />
        <GridRow />
        <GridRow />
        <GridRow />
    </FlexGridRows>
</FlexGrid>

@code {
    FlexGrid grid;

    protected override void OnAfterRender(bool firstRender)
    {
        if (!firstRender)
            return;

        grid.ColumnHeaders[0, 0] = "Weekday";
        grid.ColumnHeaders[0, 1] = "Weekday";
        grid.ColumnHeaders[0, 2] = "Weekday";
        grid.ColumnHeaders[0, 3] = "Weekday";
        grid.ColumnHeaders[0, 4] = "Weekday";
        grid.ColumnHeaders[0, 5] = "Weekend";
        grid.ColumnHeaders[0, 6] = "Weekend";

        grid.RowHeaders[0, 0] = "12:00";
        grid.RowHeaders[1, 0] = "13:00";
        grid.RowHeaders[2, 0] = "14:00";
        grid.RowHeaders[3, 0] = "15:00";
        grid.RowHeaders[4, 0] = "16:00";
        grid.RowHeaders[5, 0] = "17:00";
        grid.RowHeaders[6, 0] = "18:00";

        grid[0, 0] = "Walker";
        grid[0, 1] = "Morning Show";
        grid[0, 2] = "Morning Show";
        grid[0, 3] = "Sports";
        grid[0, 4] = "Weather";
        grid[0, 5] = "N/A";
        grid[0, 6] = "N/A";
        grid[1, 5] = "N/A";
        grid[1, 6] = "N/A";
        grid[2, 5] = "N/A";
        grid[2, 6] = "N/A";
        grid[3, 5] = "N/A";
        grid[3, 6] = "N/A";
        grid[4, 5] = "N/A";
        grid[4, 6] = "N/A";
        grid[1, 0] = "Today Show";
        grid[1, 1] = "Today Show";
        grid[2, 0] = "Today Show";
        grid[2, 1] = "Today Show";
        grid[1, 2] = "Sesame Street";
        grid[1, 3] = "Football";
        grid[2, 3] = "Football";
        grid[1, 4] = "Market Watch";
        grid[2, 2] = "Kids Zone";
        grid[2, 4] = "Soap Opera";
        grid[3, 0] = "News";
        grid[3, 1] = "News";
        grid[3, 2] = "News";
        grid[3, 3] = "News";
        grid[3, 4] = "News";
        grid[4, 0] = "News";
        grid[4, 1] = "News";
        grid[4, 2] = "News";
        grid[4, 3] = "News";
        grid[4, 4] = "News";
        grid[5, 0] = "Wheel of Fortune";
        grid[5, 1] = "Wheel of Fortune";
        grid[5, 2] = "Wheel of Fortune";
        grid[5, 3] = "Jeopardy";
        grid[5, 4] = "Jeopardy";
        grid[5, 5] = "Movie";
        grid[6, 5] = "Movie";
        grid[5, 6] = "Golf";
        grid[6, 6] = "Golf";
        grid[6, 0] = "Night Show";
        grid[6, 1] = "Night Show";
        grid[6, 2] = "Sports";
        grid[6, 3] = "Big Brother";
        grid[6, 4] = "Big Brother";
    }
}

 

 

Copyright © MESCIUS inc. All rights reserved.