Merge pull request #7168 from syncfusion-content/993969-UgDataGrid

993969 ug data grid

Author: VigneshNatarajan27

blazor/datagrid/editing.md

@@ -765,11 +765,11 @@ The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids
 
 To customize the default Grid EditForm input component, you can define an `EditTemplate` inside the GridColumn for the complex field. You can edit complex objects using `EditTemplate` by defining two-way (**@bind-Value**) binding inside the GridColumn to reflect changes in the DataGrid.
 
-For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a double underscore `(__)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name__FirstName**.
+For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a Triple underscore `(___)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name___FirstName**.
 
-> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this double underscore (__) format to avoid issues with validation and focus handling.
+> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this Triple underscore (___) format to avoid issues with validation and focus handling.
 
-In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name__FirstName** and **Name__LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**).
+In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name___FirstName** and **Name___LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}

blazor/datagrid/searching.md

@@ -213,6 +213,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.DropDowns
 
@@ -223,6 +224,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 </SfDropDownList>
 
 <SfGrid DataSource="@Orders" Toolbar=@ToolbarItems>
+    <GridSearchSettings Operator="@SearchOperator"></GridSearchSettings>
     <GridColumns>
         <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
@@ -246,14 +248,6 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
         public Operator Value { get; set; }
     }
 
-     public enum Operator
-    {
-        StartsWith,
-        EndsWith,
-        Contains,
-        Equal
-    }
-
     List<DropDownOrder> DropDownData = new List<DropDownOrder>
     {
         new DropDownOrder(){Text="StartsWith",Value= Operator.StartsWith },
@@ -316,7 +310,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBgCXKXMPQpCngI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtheMWibUKtkPFVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ## Search by external button