adaptive layout sample committed

Author: syncsiva

Grid-AdaptiveLayout/Grid-AdaptiveLayout/Grid-AdaptiveLayout.csproj

@@ -8,7 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Syncfusion.Blazor" Version="20.4.0.48" />
+    <PackageReference Include="Syncfusion.Blazor.Grid" Version="20.4.0.49" />
   </ItemGroup>
 
 </Project>

Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/Counter.razor

@@ -4,18 +4,21 @@
 @using Syncfusion.Blazor.Grids
 
 <div style="position:relative; min-height: 500px;">
-    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
+    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"/>
     @if (activeBreakpoint == "Small")
     {
-        isAdaptive = true;
+        rowDirection = RowDirection.Vertical;
     }
     else
     {
-        isAdaptive = false;
+        rowDirection = RowDirection.Horizontal;
     }
-    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="@isAdaptive" RowRenderingMode="RowDirection.Vertical" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" AllowPaging="true">
-        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
-        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
+    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true"
+            EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" RowRenderingMode="@rowDirection"
+            Height="100%" Width="100%" AllowPaging="true"
+            Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
+        <GridFilterSettings Type="@FilterType.Excel"/>
+        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"/>
         <GridColumns>
             <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="80" ValidationRules="@(new ValidationRules{ Required= true })"></GridColumn>
             <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
@@ -28,7 +31,7 @@
 @code {
     public List<Order>? Orders { get; set; }
     private string? activeBreakpoint { get; set; }
-    private bool isAdaptive { get; set; }
+    private RowDirection rowDirection{ get; set; }
 
     protected override void OnInitialized()
     {

Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/Index.razor

@@ -3,14 +3,16 @@
 @using Syncfusion.Blazor.Grids
 
 <div style="position:relative; min-height: 500px;">
-    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="true" AdaptiveUIMode="AdaptiveMode.Mobile" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%" AllowPaging="true">
-        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
-        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
+    <SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="true"
+        AdaptiveUIMode="AdaptiveMode.Mobile" Height="100%" Width="100%" AllowPaging="true"
+        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })">
+        <GridFilterSettings Type="@FilterType.Excel"/>
+        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"/>
         <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>
+            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="80"/>
+            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"/>
+            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" Width="130"/>
+            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="120"/>
         </GridColumns>
     </SfGrid>
 </div>

Grid-AdaptiveLayout/Grid-AdaptiveLayout/Program.cs

@@ -10,7 +10,7 @@
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
-builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
+builder.Services.AddSyncfusionBlazor();
 
 var app = builder.Build();