910110: Update the getting-started-with-web-app.

Author: MalleshRavichandran

blazor/multicolumn-combobox/getting-started-with-web-app.md

@@ -144,36 +144,18 @@ After initialization, populate the MultiColumn ComboBox with data using the [Dat
 
 ## Configuring the Columns
 
-The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column width for optimal display, and set the column alignment (left, center, or right) to enhance readability.
+The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) (left, center, or right) to enhance readability.
 
 {% tabs %}
 {% highlight razor %}
 
-<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" 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 }
-        };
-        return base.OnInitializedAsync();
-    }
-}
+ <SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
+     <MultiColumnComboboxColumns>
+         <MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+         <MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+         <MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
+     </MultiColumnComboboxColumns>
+ </SfMultiColumnComboBox>
 
 {% endhighlight %}
 {% endtabs %}