Add a sample page for adaptive UI with SfMediaQuery

Joseph Herson Thomas · Joseph Herson Thomas · commit 2c19fd3ab588 · 2023-02-06T13:58:50.000+05:30
diff --git a/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Grid-AdaptiveLayout.csproj b/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Grid-AdaptiveLayout.csproj
@@ -8,7 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Syncfusion.Blazor.Grid" Version="20.2.0.38" />
+    <PackageReference Include="Syncfusion.Blazor" Version="20.4.0.48" />
   </ItemGroup>
 
 </Project>
diff --git a/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/Counter.razor b/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/Counter.razor
@@ -1,18 +1,53 @@
 ﻿@page "/counter"
 
-<PageTitle>Counter</PageTitle>
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Grids
 
-<h1>Counter</h1>
+<div style="position:relative; min-height: 500px;">
+    <SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
+    @if (activeBreakpoint == "Small")
+    {
+        isAdaptive = true;
+    }
+    else
+    {
+        isAdaptive = false;
+    }
+    <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>
+        <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>
+            <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>
 
-<p role="status">Current count: @currentCount</p>
 
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+</div>
 
 @code {
-    private int currentCount = 0;
+    public List<Order>? Orders { get; set; }
+    private string? activeBreakpoint { get; set; }
+    private bool isAdaptive { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Orders = Enumerable.Range(1, 75).Select(x => new Order()
+            {
+                OrderID = 1000 + x,
+                CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
+                Freight = 2.1 * x,
+                OrderDate = DateTime.Now.AddDays(-x),
+            }).ToList();
+    }
 
-    private void IncrementCount()
+    public class Order
     {
-        currentCount++;
+        public int? OrderID { get; set; }
+        public string? CustomerID { get; set; }
+        public DateTime? OrderDate { get; set; }
+        public double? Freight { get; set; }
     }
-}
+}
diff --git a/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/_Layout.cshtml b/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/_Layout.cshtml
@@ -11,8 +11,8 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="Grid-AdaptiveLayout.styles.css" rel="stylesheet" />
-     <link href="https://cdn.syncfusion.com/blazor/20.2.38/styles/fluent.css" rel="stylesheet" />
-    <script src="https://cdn.syncfusion.com/blazor/20.2.38/syncfusion-blazor.min.js" type="text/javascript"></script>
+     <link href="https://cdn.syncfusion.com/blazor/20.4.48/styles/fluent.css" rel="stylesheet" />
+    <script src="https://cdn.syncfusion.com/blazor/20.4.48/syncfusion-blazor.min.js" type="text/javascript"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>
diff --git a/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Shared/NavMenu.razor b/Grid-AdaptiveLayout/Grid-AdaptiveLayout/Shared/NavMenu.razor
@@ -16,7 +16,7 @@
         </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+                <span class="oi oi-plus" aria-hidden="true"></span> AdaptiveUI with SfMediaQuery
             </NavLink>
         </div>
         <div class="nav-item px-3">
