[app.component.ts]
actionComplete(args) {
if ( args.requestType === "filterafteropen" &&
(args.columnName === "ShipCountry" ||args.columnName === "ShipName")) // here we have hide the operator dropdown for specific columns
{
args.filterModel.dlgObj.element.children[0].firstElementChild.children[0].style.display =
"none";
}
}
[app.component.html]
<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' (actionComplete)="actionComplete($event)">
</ejs-grid> |
[app.component.css]
#grid-column5-flmdlg .e-flm_optrdiv {
display: none;
} |
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true" Query="@Qry" AllowPaging="true" Height="315">
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
<GridEvents OnActionBegin="ActionBegin" TValue="Order"></GridEvents>
<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" FilterSettings="@(new FilterSettings{Type = Syncfusion.Blazor.Grids.FilterType.Menu })" Type="ColumnType.Date" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@*Customized FilterColumn dialog*@
<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
<DialogPositionData X="980" Y="90"></DialogPositionData>
<DialogTemplates>
<Content>
<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Countries" DataSource="@Country">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
<DropDownListEvents ValueChange="OnChange" TValue="string" TItem="Countries"></DropDownListEvents>
</SfDropDownList>
@if (showComponent)
{
<SfDateRangePicker @ref="DateRange" TValue="DateTime?" Placeholder="Choose a Range"></SfDateRangePicker>
}
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="Filter" IsPrimary="true" OnClick="@Filter" />
<DialogButton Content="Clear" OnClick="@CloseDialog" />
</DialogButtons>
</SfDialog>
@code{
SfGrid<Order> Grid { get; set; }
SfDateRangePicker<DateTime?> DateRange { get; set; }
private bool IsVisible { get; set; } = false;
private bool showComponent { get; set; } = false;
public List<Order> Orders { get; set; }
public Query Qry = new Query();
public void Filter()
{
var Col1Pre = new WhereFilter();
var predicate = new List<WhereFilter>();
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = DateRange.StartDate, Operator = "greaterthanorequal" });
predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = DateRange.EndDate, Operator = "lessthanorequal" });
Col1Pre = WhereFilter.And(predicate);
Qry = new Query().Where(Col1Pre); // to filter the Grid
IsVisible = false;
}
public void OnChange(ChangeEventArgs<string, Countries> Args)
{
if (Args.Value == "Between")
{
showComponent = true;
}
}
public void ActionBegin(ActionEventArgs<Order> Args)
{
if (Args.RequestType == Syncfusion.Blazor.Grids.Action.FilterBeforeOpen && Args.ColumnName == "OrderDate")
{
Args.Cancel = true;
IsVisible = true;
}
}
private void CloseDialog()
{
Grid.ClearFiltering("OrderDate");
this.IsVisible = false;
}
|