DxGridLayoutItem.Area Property

Specifies the name of the layout area to which the item relates.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

[Parameter]
public string Area { get; set; }

Property Value

Type Description
String

The area name.

Remarks

You can use named areas to arrange grid layout items.

The Area property allows you to assign an area name to a grid layout's item. To specify how to position areas within grid rows, use the DxGridLayoutRow.Areas property.

<DxGridLayout style="height:500px" ColumnSpacing="8px" RowSpacing="8px">
    <Rows>
        <DxGridLayoutRow Areas="header header header" Height="100px" />
        <DxGridLayoutRow Areas="left-bar content right-bar" />
        <DxGridLayoutRow Areas="footer footer footer" Height="auto" />
    </Rows>
    <Columns>
        <DxGridLayoutColumn Width="2fr" />
        <DxGridLayoutColumn Width="60%"/>
        <DxGridLayoutColumn />
    </Columns>
    <Items>
        <DxGridLayoutItem Area="header">
            <Template>
                <div class="gridlayout-header gridlayout-item">
                    Header
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="content">
            <Template>
                <div class="gridlayout-content gridlayout-item">
                    Content
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="left-bar">
            <Template>
                <div class="gridlayout-left-side-bar gridlayout-item">
                    Left Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="right-bar">
            <Template>
                <div class="gridlayout-right-side-bar gridlayout-item">
                    Right Bar
                </div>
            </Template>
        </DxGridLayoutItem>
        <DxGridLayoutItem Area="footer">
            <Template>
                <div class="gridlayout-footer gridlayout-item">
                    Footer
                </div>
            </Template>
        </DxGridLayoutItem>
    </Items>
</DxGridLayout>

Grid Layout

Run Demo: Grid Layout - Areas

Watch Video

See Also