syncfusion-content · Vinitha-Balasubramanian · Jun 16, 2025 · Jun 16, 2025
diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md
@@ -363,4 +363,48 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htretIZeoziROVCs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htretIZeoziROVCs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Persist checkbox selection with remote data
+
+The Persist Selection feature in the Syncfusion Blazor DataGrid allows selected rows to remain selected even after performing actions such as paging, sorting, filtering, or data refreshes—including when using remote data sources. This is particularly useful in scenarios where users need to track selected items across different views or pages without losing the selection state.
+
+To enable this feature, set the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property to **true**.
+
+> When using the persist selection feature, at least one column in your Grid should be set as a primary key using the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property. This ensures that the Grid can identify and persist the selected items correctly.
+
+The following example demonstrates how to persist checkbox selections when the Grid is bound to remote data using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and `ODataV4Adaptor`:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Data
+
+<SfGrid AllowSelection="true" AllowPaging="true" AllowSorting="true" AllowFiltering="true" TValue="OrdersDetails">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/development/odata/gridodatav4service" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
+    <GridSelectionSettings CheckboxOnly="true" PersistSelection="true"></GridSelectionSettings>
+    <GridColumns>
+        <GridColumn Type="ColumnType.CheckBox" Width="50"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.Freight) Format="C2" TextAlign="TextAlign.Right" Width="200"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.ShippedDate) HeaderText="Shipped Date" Format="d" TextAlign="TextAlign.Right" Type="ColumnType.Date" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code{
+    public class OrdersDetails {
+        public int OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public DateTime? OrderDate { get; set; }
+        public double? Freight { get; set; }
+        public DateTime? ShippedDate { get; set; }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLSDxidsYqWFcdQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Filter Menu in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Filter Menu in Syncfusion Blazor DataGrid and much more details.
+description: Explore and understand the Filter Menu in Syncfusion Blazor DataGrid. Learn about its features, usage, customization, and more.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -755,6 +755,124 @@ public class OrderData
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXrftBDxzDMOqgsi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Customize the default filter menu dialog
+
+The Syncfusion Blazor DataGrid allows you to customize the default filter menu dialog by modifying the filter editor components on a per-column basis. This enables you to tailor the filter UI and behavior to better suit specific data types and user requirements, improving usability and filtering precision.
+
+You can achieve this customization by setting the `FilterEditorSettings` property on each GridColumn, which allows you to define the filter component type and configure its behavior.
+
+In the following example, different columns in the Grid are configured with custom filtering components:
+
+| Column         | Filter Component                                                                 | Customization                                         |
+| -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| **Order ID**   | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started)   | Show clear button enabled, minimum value set to 10,000 |
+| **Customer ID**| [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started)        | Autofill disabled, debounce delay set to 2000 ms       |
+| **Ship City**  | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started)        | Autofill enabled, minimum input length set to 2        |
+| **Order Time** | [TimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started)            | Step interval set to 10 minutes                        |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Calendars
+
+<SfGrid DataSource="@GridData" AllowFiltering="true" AllowPaging="true">
+    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
+    <GridPageSettings PageCount="5"></GridPageSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(Orders.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" FilterEditorSettings="OrderIdFilterSettings"></GridColumn>
+        <GridColumn Field=@nameof(Orders.CustomerID) HeaderText="Customer ID" Width="150" FilterEditorSettings="CustomerIdFilterSettings"></GridColumn>
+        <GridColumn Field=@nameof(Orders.Freight) TextAlign="TextAlign.Right" Width="120" Format="C2"></GridColumn>
+        <GridColumn Field=@nameof(Orders.OrderDate) HeaderText="Order Date" Format="dd/MM/yyyy" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(Orders.OrderTime) HeaderText="Order Time" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="160" FilterEditorSettings="OrderTimeFilterSettings"></GridColumn>
+        <GridColumn Field=@nameof(Orders.ShipCity) HeaderText="Ship City" Width="150" FilterEditorSettings="ShipCityFilterSettings"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    public List<Orders> GridData { get; set; }
+    protected override void OnInitialized()
+    {
+        GridData = Orders.GetAllRecords();
+    }
+    public IFilterSettings CustomerIdFilterSettings = new AutoCompleteFilterParams
+    {
+        AutoCompleteParams = new AutoCompleteModel
+        {
+            DebounceDelay = 2000,
+            Autofill = false,
+        }
+    };
+    public IFilterSettings OrderIdFilterSettings = new NumericFilterParams
+    {
+        NumericTextBoxParams = new NumericTextBoxModel<object>
+        {
+            ShowClearButton = true,
+            Min = 10000,
+        }
+    };
+    public IFilterSettings ShipCityFilterSettings = new AutoCompleteFilterParams
+    {
+        AutoCompleteParams = new AutoCompleteModel
+        {
+            MinLength = 2,
+            Autofill = true,
+        }
+    };
+    public IFilterSettings OrderTimeFilterSettings = new TimeFilterParams
+    {
+        TimePickerParams = new TimePickerModel<object>
+        {
+            Step = 10
+        }
+    };
+}
+{% endhighlight %}
+{% highlight c# tabtitle="Orders.cs" %}
+
+public class Orders
+{
+    public Orders() { }
+
+    public Orders(int orderID, string customerID, double freight, DateOnly orderDate, TimeOnly orderTime, string shipCity)
+    {
+        OrderID = orderID;
+        CustomerID = customerID;
+        Freight = freight;
+        OrderDate = orderDate;
+        OrderTime = orderTime;
+        ShipCity = shipCity;
+    }
+
+    public static List<Orders> GetAllRecords()
+    {
+        List<Orders> orders = new List<Orders>();
+        int code = 10000;
+        for (int i = 1; i < 5; i++)
+        {
+            orders.Add(new Orders(code + 1, "ALFKI", Math.Round((2.3 * i), 2), new DateOnly(1991, 05, 15), new TimeOnly(10, 00, 00), "Berlin"));
+            orders.Add(new Orders(code + 2, "ANATR", Math.Round((3.3 * i), 2), new DateOnly(1990, 04, 04), new TimeOnly(11, 30, 00), "Madrid"));
+            orders.Add(new Orders(code + 3, "ANTON", Math.Round((4.3 * i), 2), new DateOnly(1957, 11, 30), new TimeOnly(12, 00, 00), "Cholchester"));
+            orders.Add(new Orders(code + 4, "BLONP", Math.Round((5.3 * i), 2), new DateOnly(1930, 10, 22), new TimeOnly(15, 30, 00), "Marseille"));
+            orders.Add(new Orders(code + 5, "BOLID", Math.Round((6.3 * i), 2), new DateOnly(1953, 02, 18), new TimeOnly(16, 30, 00), "Tsawassen"));
+            code += 5;
+        }
+        return orders;
+    }
+
+    public int? OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double? Freight { get; set; }
+    public DateOnly? OrderDate { get; set; }
+    public TimeOnly? OrderTime { get; set; }
+    public string ShipCity { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ### Prevent autofill option in autocomplete of menu filter
 
 By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is set to automatically fill suggestions as you type. However, there might be scenarios where you want to prevent this autofill behavior to provide a more customized and controlled user experience.
@@ -847,7 +965,7 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi
 
 When performing filtering programmatically using methods in the Syncfusion Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the user interface.
 
-To customize the filter icon in the Grid, use the display property of the filtermenu as mentioned below:
+To customize the filter icon in the Grid, use the display property of the filter menu as mentioned below:
 
 ```cshtml
 <style>

diff --git a/blazor/datagrid/row-drag-and-drop.md b/blazor/datagrid/row-drag-and-drop.md
@@ -204,6 +204,92 @@ Here’s an example code snippet that demonstrates how to enable Row drag and dr
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfWirtinCYhFlS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Drag and drop to DataGrid in empty area
+
+The Syncfusion Blazor DataGrid supports row drag and drop functionality, allowing you to move rows between different Grids using mouse or touch interactions. Rows can be dropped either over existing data rows or into empty areas of the target Grid.
+
+This feature improves the user experience by making the Grid more interactive and intuitive, especially for workflows involving data reordering or categorization between Grids.
+
+This functionality is enabled using the `AllowEmptyAreaDrop` property, which is enabled by default. To configure drag and drop, you also need to set the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) and enable the [AllowRowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowRowDragAndDrop) property by setting it to **true** in the Grid configuration.
+
+Here’s an example code snippet that demonstrates how to enable row drag and drop to another Grid, including dropping into empty space:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid id="Grid" DataSource="@FirstGridData" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true">
+    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
+    <GridPageSettings PageCount="1" PageSize="12"></GridPageSettings>
+    <GridRowDropSettings TargetID="DestGrid"></GridRowDropSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="135"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn>
+    </GridColumns>
+</SfGrid>
+<SfGrid id="DestGrid" DataSource="@SecondGridData" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true" Height="350">
+    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
+    <GridPageSettings PageCount="1" PageSize="12"></GridPageSettings>
+    <GridRowDropSettings TargetID="Grid"></GridRowDropSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="135"></GridColumn>
+        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn>
+    </GridColumns>
+</SfGrid>
+@code {
+    public List<OrdersDetails> FirstGridData { get; set; }
+    public List<OrdersDetails> SecondGridData { get; set; } = new List<OrdersDetails>();
+    protected override void OnInitialized()
+    {
+        FirstGridData = OrdersDetails.GetAllRecords();
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrdersDetails.cs" %}
+
+public class OrdersDetails
+{
+    public static List<OrdersDetails> Orders = new List<OrdersDetails>();
+
+    public OrdersDetails() { }
+
+    public OrdersDetails(int orderID, string customerID, DateTime? orderDate)
+    {
+        this.OrderID = orderID;
+        this.CustomerID = customerID;
+        this.OrderDate = orderDate;
+    }
+
+    public static List<OrdersDetails> GetAllRecords()
+    {
+        if (Orders.Count == 0)
+        {
+            Orders.Add(new OrdersDetails(10248, "VINET", new DateTime(1996, 7, 4)));
+            Orders.Add(new OrdersDetails(10249, "TOMSP", new DateTime(1996, 7, 5)));
+            Orders.Add(new OrdersDetails(10250, "HANAR", new DateTime(1996, 7, 6)));
+            Orders.Add(new OrdersDetails(10251, "VINET", new DateTime(1996, 7, 7)));
+            Orders.Add(new OrdersDetails(10252, "SUPRD", new DateTime(1996, 7, 8)));
+            Orders.Add(new OrdersDetails(10253, "HANAR", new DateTime(1996, 7, 9)));
+            Orders.Add(new OrdersDetails(10254, "CHOPS", new DateTime(1996, 7, 10)));
+            Orders.Add(new OrdersDetails(10255, "VINET", new DateTime(1996, 7, 11)));
+            Orders.Add(new OrdersDetails(10256, "HANAR", new DateTime(1996, 7, 12)));
+        }
+        return Orders;
+    }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public DateTime? OrderDate { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Drag and drop to custom component
 
 The Syncfusion Blazor DataGrid provides the feature to drag and drop Grid rows to any custom component. This feature allows you to easily move rows from one component to another without having to manually copy and paste data. To enable row drag and drop, you need to set the [AllowRowDragAndDrop] property to **true** and defining the custom component [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ID) in the [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html#Syncfusion_Blazor_Grids_GridRowDropSettings_TargetID) property of the [RowDropSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridRowDropSettings.html) object. The `ID` provided in `TargetID` should correspond to the `ID` of the target component where the rows are to be dropped.