Skip to content

Commit d3674a6

Browse files
983672:New Grid sample
1 parent b9eedee commit d3674a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+2583
-17
lines changed

Grid/UGSamples/Components/Layout/NavMenu.razor

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,9 @@
1010
<nav class="nav flex-column">
1111
<div class="nav-item px-3">
1212
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
13-
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
13+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Getting started
1414
</NavLink>
1515
</div>
16-
17-
<div class="nav-item px-3">
18-
<NavLink class="nav-link" href="counter">
19-
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
20-
</NavLink>
21-
</div>
22-
23-
<div class="nav-item px-3">
24-
<NavLink class="nav-link" href="weather">
25-
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
26-
</NavLink>
27-
</div>
2816

2917
<div class="nav-item px-3">
3018
<NavLink class="nav-link" href="ODataAdaptor">
@@ -62,6 +50,12 @@
6250
</NavLink>
6351
</div>
6452

53+
<div class="nav-item px-3">
54+
<NavLink class="nav-link" href="grouping">
55+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Grouping
56+
</NavLink>
57+
</div>
58+
6559
<div class="nav-item px-3">
6660
<NavLink class="nav-link" href="columntemplate">
6761
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Templates
@@ -104,6 +98,12 @@
10498
</NavLink>
10599
</div>
106100

101+
<div class="nav-item px-3">
102+
<NavLink class="nav-link" href="rowVirtualization">
103+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Virtualization
104+
</NavLink>
105+
</div>
106+
107107
<div class="nav-item px-3">
108108
<NavLink class="nav-link" href="Selectionmode">
109109
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Selection
@@ -133,6 +133,12 @@
133133
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> State Management
134134
</NavLink>
135135
</div>
136+
137+
<div class="nav-item px-3">
138+
<NavLink class="nav-link" href="RTL">
139+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Globalization
140+
</NavLink>
141+
</div>
136142

137143
<div class="nav-item px-3">
138144
<NavLink class="nav-link" href="buildintoolbar">
@@ -168,6 +174,12 @@
168174
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Events
169175
</NavLink>
170176
</div>
177+
178+
<div class="nav-item px-3">
179+
<NavLink class="nav-link" href="showhideediting">
180+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> How To
181+
</NavLink>
182+
</div>
171183
</nav>
172184
</div>
173185

Grid/UGSamples/Components/Pages/Getting started/GSrowdata.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@* @page "/" *@
1+
@page "/"
22

33
<GSnavigation></GSnavigation>
44

Grid/UGSamples/Components/Pages/Home.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/"
1+
@page "/index"
22

33
<PageTitle>Home</PageTitle>
44

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@page "/AddRangeOfItems"
2+
3+
@using Syncfusion.Blazor.Grids
4+
@using Syncfusion.Blazor.Buttons
5+
@using System.Collections.ObjectModel
6+
@using System.Collections.Specialized
7+
<HowtoNavigation></HowtoNavigation>
8+
9+
<SfButton OnClick="AddRangeItems">Add Range of Items</SfButton>
10+
11+
<SfGrid @ref="Grid" DataSource="@GridData" AllowPaging="true">
12+
<GridColumns>
13+
<GridColumn Field=@nameof(OrdersDetailsObserveData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
14+
<GridColumn Field=@nameof(OrdersDetailsObserveData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
15+
<GridColumn Field=@nameof(OrdersDetailsObserveData.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
16+
<GridColumn Field=@nameof(OrdersDetailsObserveData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
17+
</GridColumns>
18+
</SfGrid>
19+
@code{
20+
SfGrid<OrdersDetailsObserveData> Grid;
21+
public SmartObservableCollection<OrdersDetailsObserveData> GridData = new SmartObservableCollection<OrdersDetailsObserveData>();
22+
public void AddRangeItems()
23+
{
24+
GridData.AddRange(Orders);
25+
}
26+
public class SmartObservableCollection<T> : ObservableCollection<T>
27+
{
28+
private bool _preventNotification = false;
29+
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
30+
{
31+
if (!_preventNotification)
32+
base.OnCollectionChanged(e);
33+
}
34+
public void AddRange(IEnumerable<T> list)
35+
{
36+
_preventNotification = true;
37+
foreach (T item in list)
38+
Add(item);
39+
_preventNotification = false;
40+
OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
41+
}
42+
}
43+
IEnumerable<OrdersDetailsObserveData> Orders = Enumerable.Range(1, 10000).Select(x => new OrdersDetailsObserveData()
44+
{
45+
OrderID = 1000 + x,
46+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
47+
Freight = 2.1 * x,
48+
OrderDate = DateTime.Now.AddDays(-x),
49+
}).ToList();
50+
public class OrdersDetailsObserveData
51+
{
52+
public int? OrderID { get; set; }
53+
public string CustomerID { get; set; }
54+
public DateTime? OrderDate { get; set; }
55+
public double? Freight { get; set; }
56+
}
57+
}
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@page "/CssIsolation"
2+
3+
@using Syncfusion.Blazor.Grids
4+
<HowtoNavigation></HowtoNavigation>
5+
6+
<div>
7+
<SfGrid DataSource="@Orders" AllowPaging="true">
8+
<GridColumns>
9+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
10+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
11+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
12+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
13+
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
14+
</GridColumns>
15+
</SfGrid>
16+
</div>
17+
18+
@code{
19+
public List<Order> Orders { get; set; }
20+
21+
protected override void OnInitialized()
22+
{
23+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
24+
{
25+
OrderID = 1000 + x,
26+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
27+
Freight = 2.1 * x,
28+
OrderDate = DateTime.Now.AddDays(-x),
29+
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
30+
}).ToList();
31+
}
32+
33+
public class Order
34+
{
35+
public int? OrderID { get; set; }
36+
public string CustomerID { get; set; }
37+
public DateTime? OrderDate { get; set; }
38+
public double? Freight { get; set; }
39+
public string ShipCountry { get; set; }
40+
}
41+
}
42+
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
::deep .e-grid .e-altrow {
2+
background-color: violet;
3+
}
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@page "/CustomDeleteConfirmDialog"
2+
3+
@using Syncfusion.Blazor.Grids
4+
@using Syncfusion.Blazor.Popups
5+
<HowtoNavigation></HowtoNavigation>
6+
7+
<SfDialog @ref="Dialog" Width="250px" Visible="false" ShowCloseIcon="true" IsModal="true">
8+
<DialogEvents Closed="Closed"></DialogEvents>
9+
<DialogTemplates>
10+
@*Here you can customize the Header and Content of delete confirmation dialog*@
11+
<Header> Delete Record</Header>
12+
<Content> You are about to Delete a Record @SelectedData ?</Content>
13+
</DialogTemplates>
14+
<DialogButtons>
15+
<DialogButton OnClick="@OkClick" Content="OK" IsPrimary="true"></DialogButton>
16+
<DialogButton OnClick="@CancelClick" Content="Cancel"></DialogButton>
17+
</DialogButtons>
18+
</SfDialog>
19+
20+
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Delete" })" Height="315">
21+
<GridEvents OnActionBegin="OnActionBegin" RowSelected="RowSelectHandler" TValue="Order"></GridEvents>
22+
<GridEditSettings AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
23+
<GridColumns>
24+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
25+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
26+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
27+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
28+
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
29+
</GridColumns>
30+
</SfGrid>
31+
32+
@code{
33+
SfGrid<Order> Grid;
34+
SfDialog Dialog;
35+
public List<Order> Orders { get; set; }
36+
public object SelectedData;
37+
public bool flag = true;
38+
public void Closed()
39+
{
40+
flag = true;
41+
}
42+
public void OnActionBegin(ActionEventArgs<Order> Args)
43+
{
44+
if (Args.RequestType.ToString() == "Delete" && flag)
45+
{
46+
Args.Cancel = true; //Cancel default delete action.
47+
Dialog.ShowAsync();
48+
flag = false;
49+
}
50+
}
51+
public void RowSelectHandler(RowSelectEventArgs<Order> Args)
52+
{
53+
SelectedData = Args.Data.OrderID;
54+
}
55+
private async Task OkClick()
56+
{
57+
await Grid.DeleteRecordAsync(); //Delete the record programmatically while clicking OK button.
58+
await Dialog.HideAsync();
59+
}
60+
private async Task CancelClick()
61+
{
62+
await Dialog.HideAsync();
63+
}
64+
protected override void OnInitialized()
65+
{
66+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
67+
{
68+
OrderID = 1000 + x,
69+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
70+
Freight = 2.1 * x,
71+
OrderDate = DateTime.Now.AddDays(-x),
72+
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
73+
}).ToList();
74+
}
75+
public class Order
76+
{
77+
public int? OrderID { get; set; }
78+
public string CustomerID { get; set; }
79+
public DateTime? OrderDate { get; set; }
80+
public double? Freight { get; set; }
81+
public string ShipCountry { get; set; }
82+
}
83+
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@page "/CustomEmptyGridDisplayMessage"
2+
3+
@using Syncfusion.Blazor.Grids
4+
<HowtoNavigation></HowtoNavigation>
5+
6+
<SfGrid DataSource="@Orders" AllowPaging="true">
7+
<GridTemplates>
8+
<EmptyRecordTemplate>
9+
<span>Custom no record message</span>
10+
</EmptyRecordTemplate>
11+
</GridTemplates>
12+
<GridColumns>
13+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
14+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
15+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date TextAlign="TextAlign.Center" Width="120"></GridColumn>
16+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
17+
</GridColumns>
18+
</SfGrid>
19+
20+
@code{
21+
public List<Order> Orders { get; set; }
22+
23+
public class Order
24+
{
25+
public int? OrderID { get; set; }
26+
public string CustomerID { get; set; }
27+
public DateTime? OrderDate { get; set; }
28+
public double? Freight { get; set; }
29+
}
30+
}
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@page "/CustomFilterChoiceItemCount"
2+
3+
@using Syncfusion.Blazor.Grids
4+
<HowtoNavigation></HowtoNavigation>
5+
6+
<SfGrid @ref="GridInstance" AllowFiltering="true" AllowPaging="true" DataSource="@Orders">
7+
<GridFilterSettings Type="FilterType.Excel"></GridFilterSettings>
8+
<GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents>
9+
<GridColumns>
10+
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
11+
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
12+
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
13+
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
14+
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
15+
</GridColumns>
16+
</SfGrid>
17+
18+
@code{
19+
SfGrid<Order> GridInstance { get; set; }
20+
public List<Order> Orders { get; set; }
21+
protected override void OnInitialized()
22+
{
23+
Orders = Enumerable.Range(1, 75).Select(x => new Order()
24+
{
25+
OrderID = 1000 + x,
26+
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
27+
Freight = 2.1 * x,
28+
OrderDate = DateTime.Now.AddDays(-x),
29+
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
30+
}).ToList();
31+
}
32+
public void OnActionBegin(ActionEventArgs<Order> args)
33+
{
34+
if (args.RequestType.ToString() == "FilterChoiceRequest")
35+
{
36+
args.FilterChoiceCount = 2; //here you can override the default take count
37+
}
38+
}
39+
public class Order
40+
{
41+
public int? OrderID { get; set; }
42+
public string CustomerID { get; set; }
43+
public DateTime? OrderDate { get; set; }
44+
public double? Freight { get; set; }
45+
public string ShipCountry { get; set; }
46+
}
47+
}

0 commit comments

Comments
 (0)