Blazor Navigation and Layout - Grid Layout - Named Areas (available in v20.2.4)

As you may already know, v20.2 includes new Blazor UI components that facilitate design of custom page layouts.

Prior to v20.2.4, DevExpress Blazor layout components worked best with static layouts. You could still create a responsive layout (for different screen resolutions) by changing the layout item's position in the grid. Unfortunately this approach required item row and column index recalculation for each screen size.

Our most recent update (v20.2.4) includes a much better option for apps that require responsive layouts. With the introduction of “named areas,” our new DevExpress Blazor Grid Layout API allows you to create responsive layouts with ease. “Named areas” was inspired by the grid template areas property of CSS Grid Layout.

How to use Named Areas

You can now assign area names to layout items and specify the area's placement inside grid rows (via the DxGridLayoutItem.Area and DxGridLayoutRow.Areas properties).

To use this new feature, you should:

1. Add <Items>...</Items> to the component's markup to define the Items collection.
2. Add DxGridLayoutItem objects to the collection. Use the Template property to specify item content.
3. Use the Area property to assign an area name to each layout item.
4. Use the DxGridLayoutRow.Areas property to place the areas within rows. If you need to leave a grid cell empty, use a period character (.).

Demo | Documentation

Comparison

To see how 'named areas' can help you deliver more responsive web apps, consider the following layouts for large, medium, and small screen sizes:

Large (Desktop)

Medium (Tablet)

Small (Phone)

Let's review the two options available to you when generating these distinct layouts (old vs new approach):

1. Row and Column Indexes

Using row and column indexes requires you to manage the grid layout's row and column count and set different DxGridLayoutItem indexes for screen sizes:

<DxGridLayout>
  <Rows>
    @if(isLargeScreen) {
      <DxGridLayoutRow Height="508px" />
      <DxGridLayoutRow />
    }
    @if(isMediumScreen) {
      <DxGridLayoutRow Height="250px" />
      <DxGridLayoutRow Height="250px" />
      <DxGridLayoutRow Height="1fr" />
    }
    @if(isSmallScreen) {
      <DxGridLayoutRow Height="auto" />
      <DxGridLayoutRow Height="auto" />
      <DxGridLayoutRow Height="auto" />
      <DxGridLayoutRow Height="auto" />
    }
  </Rows>
  <Columns>
    @if(isLargeScreen) {
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
    }
    @if(isMediumScreen) {
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
    }
    @if(isSmallScreen) {
      <DxGridLayoutColumn />
    }
  </Columns>
  <Items>
    <DxGridLayoutItem Row="0" Column="0" RowSpan="isMediumScreen ? 2 : 1">
      <Template>
        <SalesDataGrid Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Row="GetRowColIndex(0, 0, 2)" Column="GetRowColIndex(1, 1, 0)">
      <Template>
         <SalesByCountryChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Row="GetRowColIndex(0, 1, 3)" Column="GetRowColIndex(2, 1, 0)">
      <Template>
         <SalesInUSChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Row="GetRowColIndex(1, 2, 1)" Column="0" ColumnSpan="3">
      <Template>
         <SalesByCityChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
  </Items>
</DxGridLayout>

@code {
  int GetRowColIndex(int largeIndex, int mediumIndex, int smallIndex) {
    if(isMediumScreen)
      return mediumIndex;
    if(isSmallScreen)
      return smallIndex;
    return largeIndex;
  }
}

2. Named Areas

Take a look at the same example from above using named areas:

<DxGridLayout>
  <Rows>
    @if(isLargeScreen) {
      <DxGridLayoutRow Areas="salesDataTable salesByCountry salesInUS" Height="508px" />
      <DxGridLayoutRow Areas="salesByCity salesByCity salesByCity" />
    }
    @if(isMediumScreen) {
      <DxGridLayoutRow Areas="salesDataTable salesByCountry" Height="250px" />
      <DxGridLayoutRow Areas="salesDataTable salesInUS" Height="250px" />
      <DxGridLayoutRow Areas="salesByCity salesByCity" Height="1fr" />
    }
    @if(isSmallScreen) {
      <DxGridLayoutRow Areas="salesDataTable" Height="auto" />
      <DxGridLayoutRow Areas="salesByCity" Height="auto" />
      <DxGridLayoutRow Areas="salesByCountry" Height="auto" />
      <DxGridLayoutRow Areas="salesInUS" Height="auto" />
    }
  </Rows>
  <Columns>
    @if(isLargeScreen) {
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
    }
    @if(isMediumScreen) {
      <DxGridLayoutColumn />
      <DxGridLayoutColumn />
    }
    @if(isSmallScreen) {
      <DxGridLayoutColumn />
    }
  </Columns>
  <Items>
    <DxGridLayoutItem Area="salesDataTable">
      <Template>
         <SalesDataGrid Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Area="salesByCountry">
      <Template>
         <SalesByCountryChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Area="salesInUS">
      <Template>
        <SalesInUSChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
    <DxGridLayoutItem Area="salesByCity">
      <Template>
        <SalesByCityChart Sales="salesData" />
      </Template>
    </DxGridLayoutItem>
  </Items>
</DxGridLayout>

As you can see, the code for 'named areas' is simpler, cleaner, and easier to maintain.

Leave a comment below and let us know how you're using our Blazor Layout components in your web applications. We’d also love to know what you think of this new feature.