Skip to content

Commit bd8fcf7

Browse files
syncsivasyncsiva
authored
Merge pull request #3 from SyncfusionExamples/GH-3546-AdaptiveUI
GH(GH-3546):Prepare video for Adaptive UI Layout in Blazor DataGrid Component
2 parents 2e22056 + 2596529 commit bd8fcf7

File tree

4 files changed

+47
-14
lines changed

4 files changed

+47
-14
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</PropertyGroup>
99

1010
<ItemGroup>
11-
<PackageReference Include="Syncfusion.Blazor.Grid" Version="20.2.0.38" />
11+
<PackageReference Include="Syncfusion.Blazor" Version="20.4.0.48" />
1212
</ItemGroup>
1313

1414
</Project>

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

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,51 @@
11
@page "/counter"
22

3-
<PageTitle>Counter</PageTitle>
3+
@using Syncfusion.Blazor
4+
@using Syncfusion.Blazor.Grids
45

5-
<h1>Counter</h1>
6-
7-
<p role="status">Current count: @currentCount</p>
8-
9-
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
6+
<div style="position:relative; min-height: 500px;">
7+
<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
8+
@if (activeBreakpoint == "Small")
9+
{
10+
isAdaptive = true;
11+
}
12+
else
13+
{
14+
isAdaptive = false;
15+
}
16+
<SfGrid DataSource="@Orders" AllowSorting="true" AllowFiltering="true" EnableAdaptiveUI="@isAdaptive" RowRenderingMode="RowDirection.Vertical" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" AllowPaging="true">
17+
<GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
18+
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
19+
<GridColumns>
20+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="80" ValidationRules="@(new ValidationRules{ Required= true })"></GridColumn>
21+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
22+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
23+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="120"></GridColumn>
24+
</GridColumns>
25+
</SfGrid>
26+
</div>
1027

1128
@code {
12-
private int currentCount = 0;
29+
public List<Order>? Orders { get; set; }
30+
private string? activeBreakpoint { get; set; }
31+
private bool isAdaptive { get; set; }
32+
33+
protected override void OnInitialized()
34+
{
35+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
36+
{
37+
OrderID = 1000 + x,
38+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
39+
Freight = 2.1 * x,
40+
OrderDate = DateTime.Now.AddDays(-x),
41+
}).ToList();
42+
}
1343

14-
private void IncrementCount()
44+
public class Order
1545
{
16-
currentCount++;
46+
public int? OrderID { get; set; }
47+
public string? CustomerID { get; set; }
48+
public DateTime? OrderDate { get; set; }
49+
public double? Freight { get; set; }
1750
}
18-
}
51+
}

‎Grid-AdaptiveLayout/Grid-AdaptiveLayout/Pages/_Layout.cshtml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
1212
<link href="css/site.css" rel="stylesheet" />
1313
<link href="Grid-AdaptiveLayout.styles.css" rel="stylesheet" />
14-
<link href="https://cdn.syncfusion.com/blazor/20.2.38/styles/fluent.css" rel="stylesheet" />
15-
<script src="https://cdn.syncfusion.com/blazor/20.2.38/syncfusion-blazor.min.js" type="text/javascript"></script>
14+
<link href="https://cdn.syncfusion.com/blazor/20.4.48/styles/fluent.css" rel="stylesheet" />
15+
<script src="https://cdn.syncfusion.com/blazor/20.4.48/syncfusion-blazor.min.js" type="text/javascript"></script>
1616
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
1717
</head>
1818
<body>

‎Grid-AdaptiveLayout/Grid-AdaptiveLayout/Shared/NavMenu.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</div>
1717
<div class="nav-item px-3">
1818
<NavLink class="nav-link" href="counter">
19-
<span class="oi oi-plus" aria-hidden="true"></span> Counter
19+
<span class="oi oi-plus" aria-hidden="true"></span> AdaptiveUI with SfMediaQuery
2020
</NavLink>
2121
</div>
2222
<div class="nav-item px-3">

0 commit comments

Comments
 (0)