Added Blazor AutoComplete UGsamples

AutoComplete/AutoCompleteUGSample.sln

@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.0.32112.339
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AutoCompleteUGSample.Server", "Server\AutoCompleteUGSample.Server.csproj", "{5D52EF5C-4AD5-47CD-890C-DA90989BD79D}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AutoCompleteUGSample.Client", "Client\AutoCompleteUGSample.Client.csproj", "{BC05C2D3-B4AF-45C9-B8D0-84C78D123304}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AutoCompleteUGSample.Shared", "Shared\AutoCompleteUGSample.Shared.csproj", "{E81C3C84-BD3B-4A31-A6D5-D515A88D23A1}"
+EndProject
+Global
+GlobalSection(SolutionConfigurationPlatforms) = preSolution
+Debug|Any CPU = Debug|Any CPU
+Release|Any CPU = Release|Any CPU
+EndGlobalSection
+GlobalSection(ProjectConfigurationPlatforms) = postSolution
+{5D52EF5C-4AD5-47CD-890C-DA90989BD79D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+{5D52EF5C-4AD5-47CD-890C-DA90989BD79D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+{5D52EF5C-4AD5-47CD-890C-DA90989BD79D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+{5D52EF5C-4AD5-47CD-890C-DA90989BD79D}.Release|Any CPU.Build.0 = Release|Any CPU
+{BC05C2D3-B4AF-45C9-B8D0-84C78D123304}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+{BC05C2D3-B4AF-45C9-B8D0-84C78D123304}.Debug|Any CPU.Build.0 = Debug|Any CPU
+{BC05C2D3-B4AF-45C9-B8D0-84C78D123304}.Release|Any CPU.ActiveCfg = Release|Any CPU
+{BC05C2D3-B4AF-45C9-B8D0-84C78D123304}.Release|Any CPU.Build.0 = Release|Any CPU
+{E81C3C84-BD3B-4A31-A6D5-D515A88D23A1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+{E81C3C84-BD3B-4A31-A6D5-D515A88D23A1}.Debug|Any CPU.Build.0 = Debug|Any CPU
+{E81C3C84-BD3B-4A31-A6D5-D515A88D23A1}.Release|Any CPU.ActiveCfg = Release|Any CPU
+{E81C3C84-BD3B-4A31-A6D5-D515A88D23A1}.Release|Any CPU.Build.0 = Release|Any CPU
+EndGlobalSection
+GlobalSection(SolutionProperties) = preSolution
+HideSolutionNode = FALSE
+EndGlobalSection
+GlobalSection(ExtensibilityGlobals) = postSolution
+SolutionGuid = {924F738A-53E8-4D4B-8BB1-44D664780259}
+EndGlobalSection
+EndGlobal

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

AutoComplete/Client/AutoCompleteUGSample.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.7" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.7" PrivateAssets="all" />
+ <PackageReference Include="Syncfusion.Blazor.DropDowns" Version="20.2.0.45" />
+ <PackageReference Include="Syncfusion.Blazor.Lists" Version="20.2.0.45" />
+ <PackageReference Include="Syncfusion.Blazor.Themes" Version="20.2.0.45" />
+ </ItemGroup>
+
+ <ItemGroup>
+ <ProjectReference Include="..\Shared\AutoCompleteUGSample.Shared.csproj" />
+ </ItemGroup>
+
+</Project>

AutoComplete/Client/Pages/Accessibility/KeyboardInteraction.razor

@@ -0,0 +1,40 @@
+@page "/KeyboardInteraction"
+
+@using Syncfusion.Blazor.DropDowns
+
+<SfAutoComplete TValue="string" TItem="Country" @ref="AutoObj" Placeholder="Select a country" Enabled="@enable" @onkeypress="@(e => KeyPressed(e))" DataSource="@LocalData">
+ <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@code {
+
+ public SfAutoComplete<string, Country> AutoObj;
+
+ public bool enable { get; set; } = true ;
+ public class Country
+ {
+ public string Name { get; set; }
+ public string Code { get; set; }
+ }
+
+ List<Country> LocalData = 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" },
+ };
+
+ public void KeyPressed(KeyboardEventArgs args)
+ {
+ if (args.Key == "t")
+ {
+ enable = false;
+ }
+ }
+}

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

AutoComplete/Client/Pages/DataBinding/Databinding.razor

@@ -0,0 +1,29 @@
+@page "/Databinding"
+
+@using Syncfusion.Blazor.DropDowns
+
+<p>AutoComplete value is: @AutoVal</p>
+
+<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries">
+ <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@code {
+
+ public string AutoVal;
+
+ 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" },
+ };
+}

AutoComplete/Client/Pages/DataSource/ArrayOfComplexObject.razor

@@ -0,0 +1,40 @@
+@page "/ArrayOfComplexObject"
+
+@using Syncfusion.Blazor.DropDowns
+<DataSourceRoute></DataSourceRoute>
+
+<SfAutoComplete TValue="string" TItem="Complex" Placeholder="e.g. Select a country" DataSource="@LocalData">
+<AutoCompleteFieldSettings Value="Country.CountryID" ></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@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;
+ }
+ }
+}

AutoComplete/Client/Pages/DataSource/ArrayOfObject.razor

@@ -0,0 +1,41 @@
+@page "/ArrayOfObject"
+
+@using Syncfusion.Blazor.DropDowns
+<DataSourceRoute></DataSourceRoute>
+
+<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@Countries">
+ <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@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" },
+ };
+}

AutoComplete/Client/Pages/DataSource/BindToRemoteData.razor

@@ -0,0 +1,33 @@
+@page "/BindToRemoteData"
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.DropDowns
+<DataSourceRoute></DataSourceRoute>
+
+ <SfAutoComplete TValue="string" TItem="OrderDetails" Placeholder="Select a name" Query="@RemoteDataQuery" Autofill="true">
+ <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
+ <AutoCompleteFieldSettings Value="CustomerID"></AutoCompleteFieldSettings>
+ </SfAutoComplete>
+
+@code{
+
+ public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
+
+ public Syncfusion.Blazor.Lists.SortOrder Sort { get; set; } = Syncfusion.Blazor.Lists.SortOrder.Ascending;
+
+ 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; }
+ }
+}

AutoComplete/Client/Pages/DataSource/BindingDynamicObject.razor

@@ -0,0 +1,42 @@
+@page "/BindingDynamicObject"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Dynamic
+<DataSourceRoute></DataSourceRoute>
+
+<SfAutoComplete TValue="string" TItem="DynamicDictionary" Placeholder="Select a name" DataSource="@Orders">
+ <AutoCompleteFieldSettings Text="CustomerName" Value="CustomerName"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@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;
+ }
+ }
+}

AutoComplete/Client/Pages/DataSource/BindingExpandoObject.razor

@@ -0,0 +1,23 @@
+@page "/BindingExpandoObject"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Dynamic
+<DataSourceRoute></DataSourceRoute>
+
+<SfAutoComplete TItem="ExpandoObject" TValue="string" PopupHeight="230px" Placeholder="Select a vehicle" DataSource="@VehicleData">
+ <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+
+@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>();
+ }
+}

AutoComplete/Client/Pages/DataSource/BindingObservableCollection.razor

@@ -0,0 +1,34 @@
+@page "/BindingObservableCollection"
+
+@using Syncfusion.Blazor.DropDowns
+@using System.Collections.ObjectModel;
+<DataSourceRoute></DataSourceRoute>
+
+<SfAutoComplete TValue="string" TItem="Colors" PopupHeight="230px" Placeholder="Select a color" DataSource="@ColorsData">
+ <AutoCompleteFieldSettings Value="Color"></AutoCompleteFieldSettings>
+</SfAutoComplete>
+@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" }
+ };
+}