Prepared UG samples for Blazor PreDefinedDialog, DropDownMenu and DropDownList components

DropDownList/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>

DropDownList/Client/DropDownListUGSample.Client.csproj

@@ -0,0 +1,20 @@
+<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.DropDowns" Version="20.2.0.49" />
+ <PackageReference Include="Syncfusion.Blazor.Themes" Version="20.2.0.49" />
+ </ItemGroup>
+
+ <ItemGroup>
+ <ProjectReference Include="..\Shared\DropDownListUGSample.Shared.csproj" />
+ </ItemGroup>
+
+</Project>

DropDownList/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++;
+ }
+}

DropDownList/Client/Pages/Data Binding/BindRoute.razor

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

DropDownList/Client/Pages/Data Binding/BindValue.razor

@@ -0,0 +1,30 @@
+@page "/BindValue"
+
+@using Syncfusion.Blazor.DropDowns
+<BindRoute></BindRoute>
+
+<p>DropDownList value is:<strong>@DropVal</strong></p>
+
+<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Country" @bind-Value="@DropVal" DataSource="@Countries">
+ <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+
+ public string DropVal;
+
+ public class Country
+ {
+ public string Name { get; set; }
+
+ public string Code { get; set; }
+ }
+
+ List<Country> Countries = new List<Country>
+{
+ new Country() { Name = "Australia", Code = "AU" },
+ new Country() { Name = "Bermuda", Code = "BM" },
+ new Country() { Name = "Canada", Code = "CA" },
+ new Country() { Name = "Cameroon", Code = "CM" },
+ };
+}

DropDownList/Client/Pages/Data Binding/IndexValueBinding.razor

@@ -0,0 +1,28 @@
+@page "/IndexValueBinding"
+
+@using Syncfusion.Blazor.DropDowns
+<BindRoute></BindRoute>
+
+<SfAutoComplete TValue="string" Placeholder="e.g. Australia" TItem="Country" @bind-Index="@ddlIndex" DataSource="@Countries">
+ <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@code {
+
+ private int? ddlIndex { get; set; } = 1;
+
+ public class Country
+ {
+ public string Name { get; set; }
+
+ public string Code { get; set; }
+ }
+
+ List<Country> Countries = new List<Country>
+{
+ new Country() { Name = "Australia", Code = "AU" },
+ new Country() { Name = "Bermuda", Code = "BM" },
+ new Country() { Name = "Canada", Code = "CA" },
+ new Country() { Name = "Cameroon", Code = "CM" },
+ };
+}

DropDownList/Client/Pages/Data Source/ArrayOfComplexData.razor

@@ -0,0 +1,40 @@
+@page "/ArrayOfComplexData"
+
+@using Syncfusion.Blazor.DropDowns
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="string" TItem="Complex" Placeholder="e.g. Select a country" DataSource="@LocalData">
+ <DropDownListFieldSettings Text="Country.CountryID" Value="Code.ID"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+
+ public IEnumerable<Complex> LocalData { get; set; } = new Complex().GetData();
+
+ public class Code
+ {
+ public string ID { get; set; }
+ }
+
+ public class Country
+ {
+ public string CountryID { get; set; }
+ }
+
+ public class Complex
+ {
+ public Country Country { get; set; }
+ public Code Code { get; set; }
+ public List<Complex> GetData()
+ {
+ List<Complex> Data = new List<Complex>();
+ Data.Add(new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } });
+ Data.Add(new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } });
+ Data.Add(new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } });
+ Data.Add(new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } });
+ Data.Add(new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } });
+ Data.Add(new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } });
+ return Data;
+ }
+ }
+}

DropDownList/Client/Pages/Data Source/ArrayOfJSONData.razor

@@ -0,0 +1,41 @@
+@page "/ArrayOfJSONData"
+
+@using Syncfusion.Blazor.DropDowns
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@Countries">
+ <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+
+ public class Country
+ {
+ public string Name { get; set; }
+
+ public string Code { get; set; }
+ }
+
+ List<Country> Countries = new List<Country>
+ {
+ new Country() { Name = "Australia", Code = "AU" },
+ new Country() { Name = "Bermuda", Code = "BM" },
+ new Country() { Name = "Canada", Code = "CA" },
+ new Country() { Name = "Cameroon", Code = "CM" },
+ new Country() { Name = "Denmark", Code = "DK" },
+ new Country() { Name = "France", Code = "FR" },
+ new Country() { Name = "Finland", Code = "FI" },
+ new Country() { Name = "Germany", Code = "DE" },
+ new Country() { Name = "Greenland", Code = "GL" },
+ new Country() { Name = "Hong Kong", Code = "HK" },
+ new Country() { Name = "India", Code = "IN" },
+ new Country() { Name = "Italy", Code = "IT" },
+ new Country() { Name = "Japan", Code = "JP" },
+ new Country() { Name = "Mexico", Code = "MX" },
+ new Country() { Name = "Norway", Code = "NO" },
+ new Country() { Name = "Poland", Code = "PL" },
+ new Country() { Name = "Switzerland", Code = "CH" },
+ new Country() { Name = "United Kingdom", Code = "GB" },
+ new Country() { Name = "United States", Code = "US" },
+ };
+}

DropDownList/Client/Pages/Data Source/BindRemoteData.razor

@@ -0,0 +1,29 @@
+@page "/BindRemoteData"
+
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.DropDowns
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="string" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query">
+ <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain=true></SfDataManager>
+ <DropDownListFieldSettings Text="CustomerID" Value="OrderID"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+ public Query Query = new Query().Select(new List<string> { "CustomerID", "OrderID" }).Take(6).RequiresCount();
+
+ public class OrderDetails
+ {
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string ShipCity { get; set; }
+ public bool Verified { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public string ShipAddress { get; set; }
+ }
+}

DropDownList/Client/Pages/Data Source/BindingDynamicObject.razor

@@ -0,0 +1,42 @@
+@page "/BindingDynamicObject"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Dynamic
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="string" TItem="DynamicDictionary" Placeholder="Select a name" DataSource="@Orders">
+ <DropDownListFieldSettings Text="CustomerName" Value="CustomerName"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+ public List<DynamicDictionary> Orders = new List<DynamicDictionary>() { };
+ protected override void OnInitialized()
+ {
+ Orders = Enumerable.Range(1, 15).Select((x) =>
+ {
+ dynamic d = new DynamicDictionary();
+ d.OrderID = 1000 + x;
+ d.CustomerName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Anne", "Nige", "Fuller", "Dodsworth", "Leverling", "Callahan", "Suyama", "Davolio" }[x - 1]);
+ return d;
+ }).Cast<DynamicDictionary>().ToList<DynamicDictionary>();
+ }
+ public class DynamicDictionary : System.Dynamic.DynamicObject
+ {
+ Dictionary<string, object> dictionary = new Dictionary<string, object>();
+ public override bool TryGetMember(GetMemberBinder binder, out object result)
+ {
+ string name = binder.Name;
+ return dictionary.TryGetValue(name, out result);
+ }
+ public override bool TrySetMember(SetMemberBinder binder, object value)
+ {
+ dictionary[binder.Name] = value;
+ return true;
+ }
+ //The GetDynamicMemberNames method of DynamicObject class must be overridden and return the property names to perform data operation and editing while using DynamicObject.
+ public override System.Collections.Generic.IEnumerable<string> GetDynamicMemberNames()
+ {
+ return this.dictionary?.Keys;
+ }
+ }
+}

DropDownList/Client/Pages/Data Source/BindingExpandoObject.razor

@@ -0,0 +1,23 @@
+@page "/BindingExpandoObject"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Dynamic
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TItem="ExpandoObject" TValue="string" PopupHeight="230px" Placeholder="Select a vehicle" DataSource="@VehicleData">
+ <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+ public List<ExpandoObject> VehicleData { get; set; } = new List<ExpandoObject>();
+ protected override void OnInitialized()
+ {
+ VehicleData = Enumerable.Range(1, 15).Select((x) =>
+ {
+ dynamic d = new ExpandoObject();
+ d.ID = (1000 + x).ToString();
+ d.Text = (new string[] { "Hennessey Venom", "Bugatti Chiron", "Bugatti Veyron Super Sport", "SSC Ultimate Aero", "Koenigsegg CCR", "McLaren F1", "Aston Martin One- 77", "Jaguar XJ220", "McLaren P1", "Ferrari LaFerrari", "Mahindra Jaguar", "Hyundai Toyota", "Jeep Volkswagen", "Tata Maruti Suzuki", "Audi Mercedes Benz" }[x - 1]);
+ return d;
+ }).Cast<ExpandoObject>().ToList<ExpandoObject>();
+ }
+}

DropDownList/Client/Pages/Data Source/BindingObservableCollection.razor

@@ -0,0 +1,35 @@
+@page "/BindingObservableCollection"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Collections.ObjectModel;
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="string" TItem="Colors" PopupHeight="230px" Placeholder="Select a color" DataSource="@ColorsData">
+ <DropDownListFieldSettings Text="Color" Value="Code"></DropDownListFieldSettings>
+</SfDropDownList>
+
+@code {
+ public class Colors
+ {
+ public string Code { get; set; }
+ public string Color { get; set; }
+ }
+ private ObservableCollection<Colors> ColorsData = new ObservableCollection<Colors>()
+ {
+ new Colors() { Color = "Chocolate", Code = "#75523C" },
+ new Colors() { Color = "CadetBlue", Code = "#3B8289" },
+ new Colors() { Color = "DarkOrange", Code = "#FF843D" },
+ new Colors() { Color = "DarkRed", Code = "#CA3832"},
+ new Colors() { Color = "Fuchsia", Code = "#D44FA3" },
+ new Colors() { Color = "HotPink", Code = "#F23F82" },
+ new Colors() { Color = "Indigo", Code = "#2F5D81" },
+ new Colors() { Color = "LimeGreen", Code = "#4CD242" },
+ new Colors() { Color = "OrangeRed", Code = "#FE2A00" },
+ new Colors() { Color = "Tomato", Code = "#FF745C" },
+ new Colors() { Color = "Brown", Code = "#A52A2A" },
+ new Colors() { Color = "Maroon", Code = "#800000" },
+ new Colors() { Color = "Green", Code = "#008000" },
+ new Colors() { Color = "Pink", Code = "#FFC0CB" },
+ new Colors() { Color = "Purple", Code = "#800080" }
+ };
+}

DropDownList/Client/Pages/Data Source/EnumDataBinding.razor

@@ -0,0 +1,24 @@
+@page "/EnumDataBinding"
+
+@using Syncfusion.Blazor.DropDowns;
+<SourceRoute></SourceRoute>
+
+<SfDropDownList TValue="Values" TItem="string" Placeholder="e.g. Australia" DataSource="@EnumValues" @bind-Value="@ddlVal">
+</SfDropDownList>
+
+@code {
+
+ public string[] EnumValues = Enum.GetNames(typeof(Values));
+ public Values ddlVal { get; set; } = Values.Canada;
+
+ public enum Values
+ {
+ Australia,
+ Bermuda,
+ Canada,
+ Denmark,
+ India,
+ US
+
+ }
+}