Skip to content

999266: Change the Filtermenu Sample #7286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GuhanathanRamanathaN wants to merge 1 commit into
base: development
Choose a base branch
from
Open

999266: Change the Filtermenu Sample #7286

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 61 additions & 27 deletions blazor/datagrid/filter-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1299,64 +1299,77 @@ In this configuration, the `SfDateRangePicker` is rendered in the filter templat
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}

@page "/"

@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids

<SfGrid @ref="Grid" TValue="OrderData" AllowFiltering="true" AllowPaging="true" DataSource="@GridData">
<GridEvents Filtering="FilteringHandler" TValue="OrderData"></GridEvents>
<GridEvents Filtering="FilteringHandler" FilterDialogOpening="FilterDialogOpeningHandler" TValue="OrderData"></GridEvents>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true"
TextAlign="TextAlign.Right" Width="120"></GridColumn>
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="MM/dd/yyyy hh:mm tt"
TextAlign="TextAlign.Right" Width="250">
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="MM/dd/yyyy hh:mm tt"
TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="250">
<FilterTemplate>
@{
<SfDateRangePicker Placeholder="Choose a Range" Width="500" ShowClearButton="true"
@bind-StartDate="StartDate" @bind-EndDate="EndDate" TValue="DateTime">
<DateRangePickerEvents TValue="DateTime" ValueChange="ValueChangeHandler">
<SfDateRangePicker @ref="DateRangePicker" Placeholder="Choose a Range" Width="500" ShowClearButton="true"
@bind-StartDate="StartDate" @bind-EndDate="EndDate" TValue="DateTime?">
<DateRangePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler">
</DateRangePickerEvents>
</SfDateRangePicker>
}
</FilterTemplate>
</GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2"
TextAlign="TextAlign.Right" Width="120"></GridColumn>
TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>

@if (IsOrderDateCssEnabled)
{
<style>
/* Hide operator dropdown only for OrderDate filter menu */
.e-ddl.e-input-group {
display: none !important;
}
</style>
}

@code {

public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }

public bool IsOrderDateCssEnabled { get; set; } = false;

public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public List<OrderData> GridData { get; set; }
SfGrid<OrderData>? Grid { get; set; }
SfDateRangePicker<DateTime?> DateRangePicker;

protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}

public async Task FilteringHandler(FilteringEventArgs args)

public async Task FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args)
{
if (args.ColumnName == "OrderDate" && args.FilterPredicates != null)
{
args.Cancel = true; //cancel default filter action.

args.Cancel = true;

if (Grid.FilterSettings.Columns == null)
{
Grid.FilterSettings.Columns = new List<GridFilterColumn>();
}
if (Grid.FilterSettings.Columns.Count > 0)
{
Grid.FilterSettings.Columns.RemoveAll(c => c.Field == "OrderDate");
}
// Get all the Grid columns.
var columns = await Grid.GetColumns();
// Fetch the Uid of OrderDate column.
Grid.FilterSettings.Columns.RemoveAll(c => c.Field == "OrderDate");

var columns = await Grid.GetColumnsAsync();
string fUid = columns[2].Uid;

Grid.FilterSettings.Columns.Add(new GridFilterColumn
{
Field = "OrderDate",
Expand All @@ -1370,27 +1383,48 @@ In this configuration, the `SfDateRangePicker` is rendered in the filter templat
Field = "OrderDate",
Operator = Syncfusion.Blazor.Operator.LessThanOrEqual,
Predicate = "and",
Value = EndDate.AddDays(1).AddSeconds(-1),
Value = EndDate?.AddDays(1).AddSeconds(-1),
Uid = fUid
});

Grid.Refresh();
}
else if (args.ColumnName == "OrderDate" && args.FilterPredicates == null)
{
StartDate = null;
EndDate = null;

}

}

public void FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)
{
if (args.ColumnName == "OrderDate")
{
IsOrderDateCssEnabled = true;
}
else
{
IsOrderDateCssEnabled = false;
}
}
public void ValueChangeHandler(RangePickerEventArgs<DateTime> args)

public void ValueChangeHandler(RangePickerEventArgs<DateTime?> args)
{
StartDate = args.StartDate;
EndDate = args.EndDate;
}
}


{% 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, DateTime? OrderDate, double? Freight)
{
Expand All @@ -1402,14 +1436,14 @@ public class OrderData

public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
if (Orders.Count == 0)
{
int OrderID = 10248;
int j = 1;
for (int i = 1; i < 7; i++)
{
Orders.Add(new OrderData(OrderID + 1, "VINET", DateTime.Now.AddDays(-j), 32.38));
Orders.Add(new OrderData(OrderID + 2, "TOMSP", DateTime.Now.AddDays(-j-1), 11.61));
Orders.Add(new OrderData(OrderID + 2, "TOMSP", DateTime.Now.AddDays(-j - 1), 11.61));
Orders.Add(new OrderData(OrderID + 3, "HANAR", DateTime.Now.AddDays(-j - 2), 65.83));
Orders.Add(new OrderData(OrderID + 4, "VICTE", DateTime.Now.AddDays(-j - 3), 45.78));
Orders.Add(new OrderData(OrderID + 5, "SUPRD", DateTime.Now.AddDays(-j - 4), 98.6));
Expand All @@ -1433,7 +1467,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}

{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJCLClyfCMmKmA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhSsLixJHGezNcW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}

## Troubleshoot filter menu operator issue

Expand Down