diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md
index a7ef3f9f4a..7d3644cc85 100644
--- a/blazor/datagrid/searching.md
+++ b/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