910685: Need to update the documentation for the multicolumn combobox component

blazor/multicolumn-combobox/code-snippet/data-binding/action-begin.razor

@@ -0,0 +1,21 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionBegin="@OnActionBeginhandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionBeginhandler(ActionBeginEventArgs args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/action-complete.razor

@@ -0,0 +1,21 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionComplete="@OnActionCompletehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionCompletehandler(ActionCompleteEventArgs<EmployeeData> args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/action-failure.razor

@@ -0,0 +1,21 @@
+                @using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionFailure="@OnActionFailurehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionFailurehandler(Exception args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/add-new-item.razor

@@ -0,0 +1,39 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Buttons
+
+<div>
+    <SfMultiColumnComboBox @ref="multicolumnObj" TItem="Games" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" TextField="Game" PopupWidth="600px" >
+</SfMultiColumnComboBox>
+</div>
+<div>
+    <SfButton Content="Click to add a new item" OnClick="OnBtnClick"></SfButton>
+</div>
+
+
+@code {
+    SfMultiColumnComboBox<string, Games> multicolumnObj;
+
+    public class Games
+    {
+        public string ID { get; set; }
+        public string Game { get; set; }
+        public string Category { get; set; } // New field
+    }
+    List<Games> LocalData = new List<Games> {
+    new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
+    new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
+    new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
+    new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
+    new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
+    new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
+    new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
+    new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
+    new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
+};
+
+    public async Task OnBtnClick()
+    {
+        await this.multicolumnObj.AddItemsAsync(new List<Games> { new Games() { ID = "Game11", Game = "Tennis", Category ="Outdoor" } });
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/combobox-with-web-api-adaptor.razor

@@ -0,0 +1,15 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="Order" TValue="string" AllowFiltering=true ValueField="ShipCountry" TextField="ShipCountry" PopupWidth="1000px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public class Order
+    {
+        public int? OrderID { get; set; }
+        public string ShipCountry { get; set; }
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/complex-data-type.razor

@@ -0,0 +1,37 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TValue="string" TItem="Complex" @bind-Value="@CountryValue" AllowFiltering=true ShowClearButton=true DataSource="@LocalData" PopupWidth="600px" ValueField="Code.ID" TextField="Country.CountryID" Placeholder="Select any product"></SfMultiColumnComboBox>
+
+@code {
+
+    public string CountryValue { get; set; } = "CM";
+    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;
+        }
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/custom-adaptor.razor

@@ -0,0 +1,66 @@
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.MultiColumnComboBox
+<SfMultiColumnComboBox TValue="string" Query="RemoteDataQuery" TItem="OrdersDetails" ValueField="OrderID" TextField="CustomID">
+    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor" ></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code{
+
+    public Query RemoteDataQuery = new Query().Take(50).RequiresCount();
+
+    public class OrdersDetails
+    {
+        public int OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public string ProductName { get; set; } // New field added
+
+        // Example static method to get all records
+        public static List<OrdersDetails> GetAllRecords()
+        {
+            var records = new List<OrdersDetails>();
+            for (int i = 1; i <= 250; i++)
+            {
+                records.Add(new OrdersDetails
+                    {
+                        OrderID = i,
+                        CustomerID = $"Customer {i}",
+                        ProductName = $"Product {i}" // Assigning value to the new field
+                    });
+            }
+            return records;
+        }
+    }
+
+    public class CustomAdaptor : DataAdaptor
+    {
+        static readonly HttpClient client = new HttpClient();
+        public static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
+        public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
+        {
+            IEnumerable<OrdersDetails> DataSource = order;
+            if (dm.Search != null && dm.Search.Count > 0)
+            {
+                DataSource = DataOperations.PerformSearching(DataSource, dm.Search);  //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<OrdersDetails>().Count();
+            if (dm.Skip != 0)
+            {
+                DataSource = DataOperations.PerformSkip(DataSource, dm.Skip);         //Paging
+            }
+            if (dm.Take != 0)
+            {
+                DataSource = DataOperations.PerformTake(DataSource, dm.Take);
+            }
+            return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
+       }
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/data-bound.razor

@@ -0,0 +1,26 @@
+@using Syncfusion.Blazor.DropDowns
+
+<SfComboBox TItem="GameFields" TValue="string" DataSource="@Games">
+    <ComboBoxEvents TItem="GameFields" TValue="string" DataBound="@DataBoundHandler"></ComboBoxEvents>
+    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
+</SfComboBox>
+
+@code {
+    public class GameFields
+    {
+        public string ID { get; set; }
+        public string Text { get; set; }
+    }
+
+    private List<GameFields> Games = new List<GameFields>() {
+        new GameFields(){ ID= "Game1", Text= "American Football" },
+        new GameFields(){ ID= "Game2", Text= "Badminton" },
+        new GameFields(){ ID= "Game3", Text= "Basketball" },
+        new GameFields(){ ID= "Game4", Text= "Cricket" },
+     };
+
+    private void DataBoundHandler(DataBoundEventArgs args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/dynamic-object-binding.razor

@@ -0,0 +1,40 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using System.Dynamic
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="DynamicDictionary" TValue="string" @bind-Value="@NameValue" DataSource="Orders" AllowFiltering=true ValueField="CustomerName" TextField="CustomerName" PopupWidth="600px" Placeholder="e.g. Andrew">
+        </SfMultiColumnComboBox>
+
+@code {
+    public string NameValue { get; set; } = "Margaret";
+    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;
+        }
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/enum-data-binding.razor

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

blazor/multicolumn-combobox/code-snippet/data-binding/expando-object-binding.razor

@@ -0,0 +1,21 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using System.Dynamic
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="ExpandoObject" TValue="string" @bind-Value="@VehicleValue" DataSource="VehicleData" AllowFiltering=true ValueField="ID" TextField="Text" PopupWidth="600px" Placeholder="e.g. Andrew">
+        </SfMultiColumnComboBox>
+
+@code {
+    public string VehicleValue { get; set; } = "1011";
+    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>();
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/local-data-binding.razor

@@ -0,0 +1,30 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+
+<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
+
+@code {
+
+     public class Product
+    {
+        public string Name { get; set; }
+        public decimal Price { get; set; }
+        public string Availability { get; set; }
+        public string Category { get; set; }
+        public double Rating { get; set; }
+    }
+    private List<Product> Products = new List<Product>();
+    private string Value { get; set; } = "Smartphone";
+    protected override Task OnInitializedAsync()
+    {
+        Products = new List<Product>
+        {
+            new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
+            new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
+            new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
+            new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
+            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
+            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
+        };
+        return base.OnInitializedAsync();
+    }
+}