Experience the Adaptive UI Layout of Blazor DataGrid for All Devices
Tags: csharp, dotnet, blazor, webdev
Published: 2022-05-16 11:19:27

---
title: Experience the Adaptive UI Layout of Blazor DataGrid for All Devices
published: true
date: 2022-05-16 11:00:27 UTC
tags: csharp, dotnet, blazor, webdev
canonical_url: https://www.syncfusion.com/blogs/post/experience-the-adaptive-ui-layout-of-blazor-datagrid-for-all-devices.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/molxo3wfilrp3vy5985z.png
---

An adaptive UI is an interactive user interface that adapts well to all kinds of devices we deploy in modern web app development.  Not surprisingly, users of smaller devices such as phones and tablets are rapidly increasing year by year, so providing UIs that fit is becoming more important as well.

Fortunately, the Syncfusion [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid") provides built-in responsiveness, but some of its features’ layouts don’t fit perfectly on smaller devices. You can easily resolve this issue using the interactive [adaptive UI layout](https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout "Adaptive UI Layout in Blazor DataGrid Component").

In this blog, we will see how to render and utilize the adaptive UI layout in the Blazor DataGrid to make it fit all kinds of devices.

**Note:** Before proceeding, refer to the [Getting started with Blazor DataGrid documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started "Getting Started with Blazor DataGrid Component").

## How to use the adaptive UI layout of Blazor DataGrid in your app

Sometimes, we might need to place the entire grid inside a parent element without affecting its height and width. To do so, define the **Height** and **Width** properties of DataGrid as 100% and enable the [EnableAdaptiveUI](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI "EnableAdaptiveUI property of Blazor DataGrid") property.

Refer to the following code example to enable adaptive UI layout in the Blazor DataGrid.

```html
<div style="position:relative;width:600px;min-height: 400px;border:solid 1px red">
  <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="true" Height="100%" Width="100%" AllowPaging="true">
   <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
   <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
    <GridColumns>
      <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="80"></GridColumn>
      <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
      <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
      <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="120"></GridColumn>
    </GridColumns>
  </SfGrid>
</div>
```

## Two different views/modes of adaptive UI layout

Most users expect to view the records in a data grid without having to scroll horizontally. This is the most difficult experience to provide on small screens.

We have resolved this using the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode "RowRenderingMode property of Blazor DataGrid") feature in our Blazor DataGrid. There are two types of rendering modes:

- [Horizontal](#horizontal-rendering-mode)
- [Vertical](#vertical-rendering-mode)

Let’s look at them.

### Horizontal rendering mode

The Blazor DataGrid rows are rendered horizontally by default. The following screenshot shows the adaptive UI layout of the Blazor DataGrid in the default horizontal view.

![Adaptive UI Layout for Blazor DataGrid in Horizontal Mode](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adaptive-UI-Layout-for-Blazor-DataGrid-in-Horizontal-Mode.png)
<figcaption>Adaptive UI Layout for Blazor DataGrid in Horizontal Mode</figcaption>

### Vertical rendering mode

In the vertical mode, the rows are rendered vertically with headers positioned in the same row instead of at the top. This feature helps fit the grid on smaller screens, especially phones.

The following screenshot shows the adaptive UI layout of Blazor DataGrid in vertical mode.

![Adaptive UI Layout for Blazor DataGrid in Vertical Mode](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adaptive-UI-Layout-for-Blazor-DataGrid-in-Vertical-Mode.png)
<figcaption>Adaptive UI Layout for Blazor DataGrid in Vertical Mode</figcaption>

## Exclusive adaptive UI layouts for interactive features

The Blazor DataGrid can render adaptive dialogs such that they will fit the full screen to provide a better user experience on smaller screen devices. You can enjoy a full-screen adaptive UI layout for some DataGrid actions, such as filtering, sorting, and CRUD operations.

### Toolbar

The toolbar items will look similar in both vertical and horizontal row rendering modes.  However, filter and sort icons will be included in the toolbar items if the grid is rendered vertically. Icons for CRUD actions like edit, delete, save, and cancel will be dynamically added or removed on selecting or deselecting the row.

![Vertical Rendering Mode of Toolbar in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Vertical-Rendering-Mode-of-Toolbar-in-Blazor-DataGrid.gif)
<figcaption>Toolbar in Vertical Rendering Mode in Blazor DataGrid</figcaption>

![Horizontal Rendering Mode of Toolbar in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Horizontal-Rendering-Mode-of-Toolbar-in-Blazor-DataGrid.gif)
<figcaption>Toolbar in Horizontal Rendering Mode in Blazor DataGrid</figcaption>

**Note:** For more details, refer to the [Toolbar in Blazor DataGrid documentation.](https://blazor.syncfusion.com/documentation/datagrid/tool-bar "Toolbar in Blazor DataGrid Component documentation")

### Filtering

The Blazor DataGrid provides built-in support for filtering. This feature displays the records that meet an applied filtering criteria. You can filter data against one or multiple columns. For more details, refer to the [Filtering in Blazor DataGrid documentation](https://blazor.syncfusion.com/documentation/datagrid/filtering "Filtering in Blazor DataGrid Component documentation").

In the adaptive UI layout of Blazor DataGrid, you can render different UIs for filtering actions to achieve a better user experience.

Refer to the following GIF image.

![Adaptive UI Layout Support for Filtering in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adaptive-UI-Layout-Support-for-Filtering-in-Blazor-DataGrid.gif)
<figcaption>Adaptive UI Layout Support for Filtering in Blazor DataGrid</figcaption>

**Note:**  The same adaptive UI layout will be rendered in horizontal and vertical modes. However, in the horizontal mode, the filter icon will be rendered in the column’s header like in the horizontal toolbar appearance.

### Sorting

You can sort the data in ascending and descending order using the Blazor DataGrid, and you can do so with an adaptive UI layout in the vertical rendering mode alone.

In the horizontal mode, you can sort the data by clicking the column’s headers. For more details, refer to [Sorting in Blazor DataGrid documentation](https://blazor.syncfusion.com/documentation/datagrid/sorting "Sorting in Blazor DataGrid documentation").

![Adaptive UI Layout Support for Sorting in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adaptive-UI-Layout-Support-for-Sorting-in-Blazor-DataGrid.gif)
<figcaption>Adaptive UI Layout Support for Sorting in Blazor DataGrid</figcaption>

### CRUD operations

The adaptive UI layouts also provide a great editing experience in the Blazor DataGrid. You can dynamically insert, update, and delete rows. For more details, refer to the [Editing in Blazor DataGrid documentation](https://blazor.syncfusion.com/documentation/datagrid/editing "Editing in Blazor DataGrid documentation").

The following editing modes are supported:

- [Normal](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing "Inline Editing in Blazor DataGrid Component")
- [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing "Batch Editing in Blazor DataGrid Component")
- [Dialog](https://blazor.syncfusion.com/documentation/datagrid/dialog-editing "Dialog Editing in Blazor DataGrid Component")

The vertical row rendering mode only supports the Dialog edit mode as shown in the following GIF image.

![Adaptive UI Layout Support for Dialog Editing Mode in Blazor DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adaptive-UI-Layout-Support-for-Dialog-Editing-Mode-in-Blazor-DataGrid.gif)
<figcaption>Adaptive UI Layout Support for Dialog Editing Mode in Blazor DataGrid</figcaption>

The adaptive UI layout supports these editing modes in tablets as well.

![Blazor DataGrid’s Adaptive UI Layout Support for Tablet Device](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Blazor-DataGrid%E2%80%99s-Adaptive-UI-Layout-Support-for-Tablet-Device.gif)
<figcaption>Adaptive UI Layout on a Tablet</figcaption>

## Show priority columns

In our Blazor DataGrid, you can easily hide columns based on the device width. This approach is useful when you don’t want to render the horizontal scroller for the DataGrid on a tablet. To do so, first, we have to mark the priority for individual columns.

This can be achieved by defining the media queries in the [HideAtMedia](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HideAtMedia "HideAtMedia property of Blazor DataGrid") Column property of the Blazor DataGrid. Then, the DataGrid will automatically show the columns based on their priority and the device width. For more details, check out the [Responsive Columns in Blazor DataGrid documentation](https://blazor.syncfusion.com/documentation/datagrid/columns#responsive-columns "Responsive columns in Blazor DataGrid documentation").

## GitHub reference

For more details, refer to the [adaptive UI layout in the Blazor DataGrid demo](https://github.com/Venkat-Ayothi/Adaptive-DataGrid "Adaptive UI layout in the Blazor DataGrid GitHub demo") on GitHub.

## Conclusion

Thanks for reading! In this blog, we have seen how to effectively render an adaptive UI layout for the Syncfusion [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid") on smaller screens to provide a better user experience. We encourage you to go through our [Blazor DataGrid demos](https://blazor.syncfusion.com/demos/datagrid/adaptive-rendering?theme=fluent "Example of Adaptive Layout in Blazor DataGrid Component") and [documentation](https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout "Adaptive UI Layout in Blazor DataGrid documentation") for more details. Try out this marvelous feature and leave your feedback in the comments section below!

The Syncfusion DataGrid is also available for the ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid "ASP.NET Core Data Grid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid "ASP.NET MVC Data Grid"), [WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/datagrid "ASP.NET Web Forms DataGrid")), [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid "Angular DataGrid"), [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid"), [React](https://www.syncfusion.com/react-ui-components/react-data-grid "React DataGrid"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-grid "Vue DataGrid"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Xamarin.Forms DataGrid"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Flutter DataTable"), [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid "UWP DataGrid"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid "WinForms DataGrid"), [WPF](https://www.syncfusion.com/wpf-ui-controls/datagrid "WPF DataGrid"), and [WinUI](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid") platforms.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out the DataGrid and hundreds of other components.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [Creating a Master-Detail View Is Easier with Blazor DataGrid](https://dev.to/syncfusion/creating-a-master-detail-view-is-easier-with-blazor-datagrid-ff0 "Blog: Creating a Master-Detail View Is Easier with Blazor DataGrid")
- [Exploring Blazor Hybrid App using Mobile Blazor Bindings](https://dev.to/syncfusion/exploring-blazor-hybrid-app-using-mobile-blazor-bindings-1o49 "Blog: Exploring Blazor Hybrid App using Mobile Blazor Bindings")