Prepared UG samples for Blazor DataManager, DatePicker and DateRangePicker components

DataManager/Client/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+ <Found Context="routeData">
+ <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+ <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+ </Found>
+ <NotFound>
+ <PageTitle>Not found</PageTitle>
+ <LayoutView Layout="@typeof(MainLayout)">
+ <p role="alert">Sorry, there's nothing at this address.</p>
+ </LayoutView>
+ </NotFound>
+</Router>

DataManager/Client/DataManagerUGSample.Client.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+ <PropertyGroup>
+ <TargetFramework>net6.0</TargetFramework>
+ <Nullable>enable</Nullable>
+ <ImplicitUsings>enable</ImplicitUsings>
+ </PropertyGroup>
+
+ <ItemGroup>
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.8" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.8" PrivateAssets="all" />
+ <PackageReference Include="Syncfusion.Blazor.Data" Version="20.2.0.49" />
+ <PackageReference Include="Syncfusion.Blazor.Grid" Version="20.2.0.49" />
+ <PackageReference Include="Syncfusion.Blazor.Themes" Version="20.2.0.49" />
+ </ItemGroup>
+
+ <ItemGroup>
+ <ProjectReference Include="..\Shared\DataManagerUGSample.Shared.csproj" />
+ </ItemGroup>
+
+</Project>

DataManager/Client/Pages/Adaptors/AdaptorRoute.razor

@@ -0,0 +1,18 @@
+<table>
+ <tr>
+ <td><a href="JsonAdaptor">JsonAdaptor</a></td>
+ <td><a href="UrlAdaptor">UrlAdaptor</a></td>
+ <td><a href="ODataAdaptor">ODataAdaptor</a></td>
+ </tr>
+ <tr>
+ <td><a href="ODataV4Adaptor">ODataV4Adaptor</a></td>
+ <td><a href="WebAPIAdaptor">WebAPIAdaptor</a></td>
+ </tr>
+</table>
+
+
+<style>
+ a {
+ padding-right: 75px;
+ }
+</style>

DataManager/Client/Pages/Adaptors/JsonAdaptor.razor

@@ -0,0 +1,38 @@
+@page "/JsonAdaptor"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+<AdaptorRoute></AdaptorRoute>
+
+<SfGrid TValue="EmployeeData" ID="Grid">
+ <SfDataManager Json=@Employees Adaptor="Adaptors.JsonAdaptor"></SfDataManager>
+ <GridColumns>
+ <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.Name) HeaderText="First Name" Width="130"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public class EmployeeData
+ {
+ public int EmployeeID { get; set; }
+ public string Name { get; set; }
+ public string Title { get; set; }
+ }
+
+ public EmployeeData[] Employees = new EmployeeData[]
+ {
+ new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" },
+ new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" },
+ new EmployeeData { EmployeeID = 3, Name = "Janet Leverling", Title = "Sales Representative" },
+ new EmployeeData { EmployeeID = 4, Name = "Andrew Davolio", Title = "Inside Sales Coordinator" },
+ new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" },
+ new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" },
+ new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" },
+ new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinato" },
+ new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" },
+ new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" }
+ };
+}

DataManager/Client/Pages/Adaptors/ODataAdaptor.razor

@@ -0,0 +1,24 @@
+@page "/ODataAdaptor"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+<AdaptorRoute></AdaptorRoute>
+
+<SfGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
+ <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></SfDataManager>
+ <GridColumns>
+ <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public class EmployeeData
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ }
+}

DataManager/Client/Pages/Adaptors/ODataV4Adaptor.razor

@@ -0,0 +1,24 @@
+@page "/ODataV4Adaptor"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+<AdaptorRoute></AdaptorRoute>
+
+<SfGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
+ <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
+ <GridColumns>
+ <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public class EmployeeData
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ }
+}

DataManager/Client/Pages/Adaptors/UrlAdaptor.razor

@@ -0,0 +1,24 @@
+@page "/UrlAdaptor"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+<AdaptorRoute></AdaptorRoute>
+
+<SfGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
+ <SfDataManager Url="http://controller.com/actions" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
+ <GridColumns>
+ <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.Name) HeaderText="First Name" Width="130"></GridColumn>
+ <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public class EmployeeData
+ {
+ public int EmployeeID { get; set; }
+ public string Name { get; set; }
+ public string Title { get; set; }
+ }
+}

DataManager/Client/Pages/Adaptors/WebAPIAdaptor.razor

@@ -0,0 +1,26 @@
+@page "/WebAPIAdaptor"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+<AdaptorRoute></AdaptorRoute>
+
+<SfGrid TValue="Order" AllowPaging="true">
+ <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
+ <GridColumns>
+ <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+ <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+ <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
+ <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public class Order
+ {
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public double? Freight { get; set; }
+ }
+}

DataManager/Client/Pages/Counter.razor

@@ -0,0 +1,18 @@
+@page "/counter"
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+ private int currentCount = 0;
+
+ private void IncrementCount()
+ {
+ currentCount++;
+ }
+}

DataManager/Client/Pages/CustomBinding/CustomBinding.razor

@@ -0,0 +1,130 @@
+@page "/CustomBinding"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+
+<SfGrid TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
+ <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
+ <GridPageSettings PageSize="8"></GridPageSettings>
+ <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>
+ <GridColumns>
+ <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>
+ <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+ <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Width="150"></GridColumn>
+ </GridColumns>
+</SfGrid>
+
+@code {
+ public static List<Order> Orders { 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,
+ }).ToList();
+ }
+
+ public class Order
+ {
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ }
+
+ // Implementing custom adaptor by extending the DataAdaptor class
+ public class CustomAdaptor : DataAdaptor
+ {
+ // Performs data Read operation
+ public override object Read(DataManagerRequest dm, string key = null)
+ {
+ IEnumerable<Order> DataSource = Orders;
+ if (dm.Search != null && dm.Search.Count > 0)
+ {
+ // Searching
+ DataSource = DataOperations.PerformSearching(DataSource, dm.Search);
+ }
+ if (dm.Sorted != null && dm.Sorted.Count > 0)
+ {
+ // Sorting
+ DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);
+ }
+ if (dm.Where != null && dm.Where.Count > 0)
+ {
+ // Filtering
+ DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
+ }
+ int count = DataSource.Cast<Order>().Count();
+ if (dm.Skip != 0)
+ {
+ //Paging
+ DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);
+ }
+ if (dm.Take != 0)
+ {
+ DataSource = DataOperations.PerformTake(DataSource, dm.Take);
+ }
+ return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
+ }
+
+ // Performs Insert operation
+ public override object Insert(DataManager dm, object value, string key)
+ {
+ Orders.Insert(0, value as Order);
+ return value;
+ }
+
+ // Performs Remove operation
+ public override object Remove(DataManager dm, object value, string keyField, string key)
+ {
+ Orders.Remove(Orders.Where(or => or.OrderID == int.Parse(value.ToString())).FirstOrDefault());
+ return value;
+ }
+
+ // Performs Update operation
+ public override object Update(DataManager dm, object value, string keyField, string key)
+ {
+ var data = Orders.Where(or => or.OrderID == (value as Order).OrderID).FirstOrDefault();
+ if (data != null)
+ {
+ data.OrderID = (value as Order).OrderID;
+ data.CustomerID = (value as Order).CustomerID;
+ data.Freight = (value as Order).Freight;
+ }
+ return value;
+ }
+
+ // Performs BatchUpdate operation
+ public override object BatchUpdate(DataManager dm, object Changed, object Added, object Deleted, string KeyField, string Key,int? dropIndex)
+ {
+ if (Changed != null)
+ {
+ foreach (var rec in (IEnumerable<Order>)Changed)
+ {
+ Orders[0].CustomerID = rec.CustomerID;
+ }
+
+ }
+ if (Added != null)
+ {
+ foreach (var rec in (IEnumerable<Order>)Added)
+ {
+ Orders.Add(rec);
+ }
+
+ }
+ if (Deleted != null)
+ {
+ foreach (var rec in (IEnumerable<Order>)Deleted)
+ {
+ Orders.RemoveAt(0);
+ }
+
+ }
+ return Orders;
+ }
+ }
+}

DataManager/Client/Pages/Data Binding/BindingRoute.razor

@@ -0,0 +1,13 @@
+<table>
+ <tr>
+ <td><a href="LocalDataBinding">LocalDataBinding</a></td>
+ <td><a href="RemoteDataBinding">RemoteDataBinding</a></td>
+ </tr>
+</table>
+
+
+<style>
+ a {
+ padding-right: 75px;
+ }
+</style>