Documentation(954494) - Revamp How to topic in blazor platform

blazor-toc.html

@@ -2063,7 +2063,13 @@
 						<a href="/blazor/datagrid/how-to/grid-styling">Styling and appearance</a>
 					</li>
 					<li>
-						<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize empty grid display message</a>
+						<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize the empty record template</a>
+					</li>
+					<li>
+						<a href="/blazor/datagrid/how-to/resize-grid-in-various-dimension">Resize the Grid in various dimension</a>
+					</li>
+					<li>
+						<a href="/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template">Use custom helper inside the loop with templates</a>
 					</li>
 					<li>
 						<a href="/blazor/datagrid/how-to/save-new-row-at-particular-index-in-page">Saving a new row at a particular index of the grid page</a>
@@ -2096,7 +2102,7 @@
 						<a href="/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox">Use radio button instead of checkbox in single selection mode of Grid</a>
 					</li>
 					<li>
-						<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable or Disable the Grid Component</a>
+						<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable/Disable Grid and its actions</a>
 					</li>
 				</ul>
 			</li>

blazor/datagrid/how-to/change-datasource-dynamically.md

@@ -1,68 +1,110 @@
 ---
 layout: post
-title: Change datasource dynamically in Syncfusion Blazor DataGrid Component
-description: Learn here all about Change datasource dynamically in Syncfusion Blazor DataGrid component and more.
+title: Change datasource dynamically in Syncfusion Blazor DataGrid
+description: Learn here all about change datasource dynamically in Syncfusion Blazor DataGrid and more.
 platform: Blazor
 control: DataGrid
 documentation: ug
 ---
 
-# Change Datasource Dynamically in Blazor DataGrid Component
+# Change Datasource Dynamically in Blazor DataGrid
 
-You can change the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) of the datagrid component dynamically through an external button.
+The Syncfusion Blazor DataGrid allows to change the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) of the Grid  dynamically through an external button. This feature is useful to display different sets of data based on specific actions.
 
-This is demonstrated in the following sample code where the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) is dynamically modified using the bounded property,
+To implement this:
+
+* Bind the Grid's `DataSource` property to a public list (e.g., Orders).
+
+* Create a method that replaces this list with a new set of data.
+
+* Trigger this method through a button or any other user interaction.
+
+* The Grid automatically detects the data change and re-renders with the new content.
+
+The following example demonstrates how to change the `DataSource` of the Grid dynamically:
+
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
 
-<SfButton OnClick="Change">Change data source dynamically</SfButton>
+<SfButton OnClick="ChangeDataSource">Change Data Source</SfButton>
 
-<SfGrid DataSource="@Orders" AllowPaging="true">
-    <GridPageSettings PageSize="8"></GridPageSettings>
+<SfGrid @ref="grid" DataSource="@Orders" AllowPaging="true">
     <GridColumns>
-        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" 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>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
+  </GridColumns>
 </SfGrid>
 
-@code{
-    public List<Order> Orders { get; set; }
+@code {
+    private SfGrid<OrderData> grid;
+    public List<OrderData> 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,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
+        Orders = OrderData.GetAllRecords();
+    }
+
+    private void ChangeDataSource()
+    {
+        // Replace the DataSource with a new list of records.
+        Orders = OrderData.GetNewRecords();
     }
-    public void Change()
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+
+    public OrderData() { }
+
+    public OrderData(int orderID, string customerID, double freight, DateTime? orderDate)
     {
-        // Data source is modified dynamically
-        this.Orders = Enumerable.Range(1, 45).Select(x => new Order()
+        this.OrderID = orderID;
+        this.CustomerID = customerID;
+        this.Freight = freight;
+        this.OrderDate = orderDate;
+    }
+
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count == 0)
         {
-            OrderID = 100 + x,
-            CustomerID = (new string[] { "CHOPS", "HANAR", "SUPRD", "TOMSP", "VINET" })[new Random().Next(5)],
-            Freight = 1.1 * x,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
+            Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4)));
+            Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5)));
+            Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6)));
+            Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7)));
+            Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8)));
+            Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9)));
+            Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); 
+        }
+        return Orders;
     }
-    public class Order
+
+    public static List<OrderData> GetNewRecords()
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        return new List<OrderData>
+        {
+            new OrderData(20001, "ALFKI", 21.50, DateTime.Now.AddDays(-1)),
+            new OrderData(20002, "ANATR", 42.75, DateTime.Now.AddDays(-2)),
+            new OrderData(20003, "ANTON", 17.00, DateTime.Now.AddDays(-3)),
+            new OrderData(20004, "BERGS", 65.20, DateTime.Now.AddDays(-4))
+        };
     }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public DateTime? OrderDate { get; set; }
 }
-```
 
-The following GIF represents DataGrid data source modified dynamically on button click,
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Datasource Dynamically in Blazor DataGrid](../images/blazor-datagrid-dynamic-datasource.gif)

blazor/datagrid/how-to/custom-control-in-grid-toolbar.md

@@ -7,13 +7,19 @@ control: DataGrid
 documentation: ug
 ---
 
-# Custom Control in Datagrid Toolbar in Blazor DataGrid Component
+# Render SfAutoComplete in custom toolbar
 
-You can render custom controls inside the datagrid's toolbar area. This can be achieved by initializing the custom controls within the Template property of the Toolbar component. This toolbar component is defined inside the datagrid component.
+Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion Blazor DataGrid allows you to enhance the Grid's usability by enabling dynamic search operations based on input.
 
-This is demonstrated in the following sample code where Autocomplete component is rendered inside the DataGrid's toolbar and is used for performing search operation on the datagrid,
+This can be achieved by utilizing the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below demonstrates how to render the `AutoComplete`  within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of the `AutoComplete` is bound to the **OnSearch** method, which performs a search operation on the Grid based on the selected input.
+
+In the **OnSearch** method, the selected value from the `AutoComplete` is used as a search keyword. The Grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method is called to filter records matching the keyword across all searchable columns.
+
+The following example demonstrates how to render the `AutoComplete` inside the Grid's toolbar and use it to perform search operations:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.DropDowns
@@ -36,56 +42,86 @@ This is demonstrated in the following sample code where Autocomplete component i
     <GridColumns>
         <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" 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>
+        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="ShipCountry" Width="130"></GridColumn>
     </GridColumns>
 </SfGrid>
 
 @code{
     public class CustomerDetails
     {
         public string Name { get; set; }
-
         public int Id { get; set; }
     }
 
     List<CustomerDetails> Customers = new List<CustomerDetails>
     {
-        new CustomerDetails() { Name = "ALFKI", Id = 1 },
-        new CustomerDetails() { Name = "ANANTR", Id = 2 },
-        new CustomerDetails() { Name = "ANTON", Id = 3 },
-        new CustomerDetails() { Name = "BLONP", Id = 4 },
-        new CustomerDetails() { Name = "BOLID", Id = 5 }
+        new CustomerDetails() { Name = "VINET", Id = 1 },
+        new CustomerDetails() { Name = "TOMSP", Id = 2 },
+        new CustomerDetails() { Name = "HANAR", Id = 3 },
+        new CustomerDetails() { Name = "VICTE", Id = 4 },
+        new CustomerDetails() { Name = "SUPRD", Id = 5 }
     };
     private SfGrid<Order> Grid;
     public 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,
-            OrderDate = DateTime.Now.AddDays(-x),
-        }).ToList();
-    }
-
-    public async Task  OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,CustomerDetails> args)
-    {
-        await this.Grid.Search(args.Value);
+        Orders = Order.GetAllRecords();
     }
 
-    public class Order
+    public async Task OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,CustomerDetails> args)
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        await this.Grid.SearchAsync(args.Value);
     }
 }
-```
 
-The following GIF represents the search operation performed on the datagrid using the Autocomplete component rendered in the toolbar,
+{% endhighlight %}
+{% highlight c# tabtitle="Order.cs" %}
+
+ public class Order
+ {
+     public static List<Order> Orders = new List<Order>();
+
+     public Order(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+     {
+         this.OrderID = orderID;
+         this.CustomerID = customerID;
+         this.Freight = freight;
+         this.ShipCity = shipCity;
+         this.ShipName = shipName;
+         this.ShipCountry = shipCountry;
+     }
+
+     public static List<Order> GetAllRecords()
+     {
+         if (Orders.Count == 0)
+         {
+             Orders.Add(new Order(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+             Orders.Add(new Order(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+             Orders.Add(new Order(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+             Orders.Add(new Order(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+             Orders.Add(new Order(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+             Orders.Add(new Order(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+             Orders.Add(new Order(10254, "VICTE", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+             Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+             Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+             Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+
+         }
+
+         return Orders;
+     }
+
+     public int OrderID { get; set; }
+     public string CustomerID { get; set; }
+     public double Freight { get; set; }
+     public string ShipCity { get; set; }
+     public string ShipName { get; set; }
+     public string ShipCountry { get; set; }
+ }
+
+{% endhighlight %}
+{% endtabs %}
 
-![Blazor DataGrid with Custom ToolBar](../images/blazor-datagrid-custom-toolbar.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}