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/custom-control-in-grid-toolbar.md

@@ -7,13 +7,15 @@ control: DataGrid
 documentation: ug
 ---
 
-# Custom Control in Datagrid Toolbar in Blazor DataGrid Component
+# Custom Control in DataGrid Toolbar in Blazor DataGrid
 
-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.
+The Syncfusion Blazor DataGrid allows you to render custom controls inside its toolbar area. This can be achieved by initializing the custom controls within the `Template` property of the Toolbar component, which is placed inside the Grid.
 
-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,
+The following example demonstrates how the [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) component can be rendered inside the Grid's toolbar and used to perform search operations on the Grid.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.DropDowns
@@ -36,56 +38,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();
+        Orders = Order.GetAllRecords();
     }
 
     public async Task  OnSearch(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string,CustomerDetails> args)
     {
-        await this.Grid.Search(args.Value);
-    }
-
-    public class Order
-    {
-        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" %}

blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md

@@ -0,0 +1,126 @@
+---
+layout: post
+title: Use custom helper inside the loop with templates in Blazor DataGrid | Syncfusion
+description: Learn here all about Place cancel icon in search bar in Syncfusion Blazor DataGrid.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Use custom helper inside the loop with templates in Blazor DataGrid
+
+The Syncfusion Blazor DataGrid allows you to use custom helpers inside the loop with [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature enables you to create complex templates that can incorporate additional helper functions.
+
+The customer rating column includes a custom template defined using `Template`. Inside this template, iterates through the item array and generates `<span>` tag, displayed as stars using the CSS below:
+
+```css
+.e-grid .rating .star:before {
+    content: '★';
+}
+
+.e-grid .rating .star {
+    font-size: 132%;
+    color: lightgrey;
+}
+```
+
+The class is dynamically assigned  based on the result of the `isRatingGreater` method, highlighting the star using the CSS below:
+
+```css
+.e-grid .rating .star.checked {
+    color: #ffa600;
+}
+```
+
+This is demonstrated in the following example.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders" Height="300px">
+    <GridColumns>
+        <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
+        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="100"></GridColumn>
+        <GridColumn HeaderText="Customer Rating" Width="120">
+            <Template>
+                @{
+                    var rating = (context as Order)?.Rating ?? 0;
+                }
+                <div class="rate">
+                    <div class="rating">
+                        @foreach (var i in Enumerable.Range(1, 5))
+                        {
+                            <span class="star @(IsRatingGreater(rating, i) ? "checked" : "")"></span>
+                        }
+                    </div>
+                </div>
+            </Template>
+        </GridColumn>
+    </GridColumns>
+</SfGrid>
+
+<style>
+    .e-grid .rating .star:before {
+        content: '★';
+    }
+
+    .e-grid .rating .star {
+        font-size: 132%;
+        color: lightgrey;
+    }
+
+    .e-grid .rating .star.checked {
+        color: #ffa600;
+    }
+</style>
+
+@code {
+    public List<Order> Orders { get; set; }
+
+    protected override void OnInitialized()
+    {
+         Orders = Order.GetAllRecords();
+    }
+
+    private bool IsRatingGreater(int dataRating, int comparisonValue)
+    {
+        return dataRating >= comparisonValue;
+    }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="Order.cs" %}
+
+public class Order
+{
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public int Rating { get; set; }
+
+    public static List<Order> GetAllRecords()
+    {
+        return new List<Order>
+        {
+            new Order { OrderID = 1001, CustomerID = "ALFKI", Rating = 3 },
+            new Order { OrderID = 1002, CustomerID = "ANATR", Rating = 5 },
+            new Order { OrderID = 1003, CustomerID = "ANTON", Rating = 2 },
+            new Order { OrderID = 1004, CustomerID = "AROUT", Rating = 4 },
+            new Order { OrderID = 1005, CustomerID = "BERGS", Rating = 1 },
+            new Order { OrderID = 1006, CustomerID = "BLAUS", Rating = 5 },
+            new Order { OrderID = 1007, CustomerID = "BLONP", Rating = 3 },
+            new Order { OrderID = 1008, CustomerID = "BOLID", Rating = 2 },
+            new Order { OrderID = 1009, CustomerID = "BONAP", Rating = 4 },
+            new Order { OrderID = 1010, CustomerID = "BOTTM", Rating = 3 },
+            new Order { OrderID = 1011, CustomerID = "BSBEV", Rating = 5 },
+            new Order { OrderID = 1012, CustomerID = "CACTU", Rating = 1 },
+            new Order { OrderID = 1013, CustomerID = "CENTC", Rating = 4 }
+        };
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeXzrApyBafWHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}