<EjsGrid @ref="@Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" Height="315">
<GridFilterSettings Type="Syncfusion.EJ2.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
<GridColumns>
...
<GridColumn Field=@nameof(Order.TagsName) HeaderText="Tags" TextAlign="TextAlign.Right" Width="120">
<Template>
@{
var tags = (context as Order).Tags;
foreach (var tag in tags)
{
<span class="badge badge-secondary">@tag.Name</span>
}
}
</Template>
</GridColumn>
</GridColumns>
</EjsGrid>
@code{
EjsGrid<Order> Grid;
...
public class Order
{
...
public double? Freight { get; set; }
public List<Tag> Tags { get; set; } = new List<Tag>();
public string TagsName { get {
var newitem = "";
foreach (Tag item in Tags)
{
if (newitem == "")
{
newitem = item.Name;
}
else
{
newitem = newitem + "," + item.Name;
}
};
return newitem; //Assign the value for TagsName based on the value from Tags property.
} set { }
}
}
...
}
|
public string TagsName { get {
var newitem = "";
foreach (Tag item in Tags)
{
newitem = item.Name; //Assign only the single value for TagsName instead of concatenated string.
};
return newitem;
} set { }
}
|
<EjsGrid @ref="@Grid" TValue="Order" AllowFiltering="true" AllowPaging="true" Height="315">
<GridEvents OnActionBegin="OnActionBegin" TValue="Order"></GridEvents> @*Bind the OnActionBegin event, to get the details of clicked column filter icon*@
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>
<GridFilterSettings Type="Syncfusion.EJ2.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
<GridColumns>
...
<GridColumn Field=@nameof(Order.Tags) HeaderText="Tags" TextAlign="TextAlign.Right" Width="120"> @*No need for new property as TagsName*@
<Template>
@{
var tags = (context as Order).Tags;
foreach (var tag in tags)
{
<span class="badge badge-secondary">@tag.Name</span>
}
}
</Template>
</GridColumn>
...
</GridColumns>
</EjsGrid>
@code{
EjsGrid<Order> Grid;
public static List<Order> Orders { get; set; }
public static string TagsColumnCheck {get;set;}
public void OnActionBegin(ActionEventArgs<Order> args) //In OnActionBegin event handler, store the clicked column name(TagsName). This is to assign the datasource for checkbox items list in filter dialog based on the clicked column(Tag or Class or Shop).
{
if(args.RequestType.ToString() == "FilterBeforeOpen")
TagsColumnCheck = args.ColumnName;
if(args.RequestType.ToString() == "Filtering")
TagsColumnCheck = null;
if(args.RequestType.ToString() == "Refresh")
TagsColumnCheck = null;
}
public static List<TagsNameClass> CheckItemData = new List<TagsNameClass>();
protected override void OnInitialized()
{
...
foreach (var a in Orders) //Prepare a list of individual values from the List<Tag> and store them in CheckItemData. Do like the same for List<Class> and List<Shop> also.
{
foreach (Tag item in a.Tags)
{
TagsNameClass o = new TagsNameClass {
Tags = item.Name
};
CheckItemData.Add(o); //Fetch the values from the Tags and store it in a List
};
}
}
public class TagsNameClass
{
public string Tags { get; set; } //Use same name as like the Order Field name(Tags)
}
public class CustomAdaptor : DataAdaptor
{
public override object Read(DataManagerRequest dm, string key = null)
{
IEnumerable<Order> DataSource = Orders;
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
//Use your own customized filter instead of our PerformFiltering method. Use the predicates you receive in dm.Where to generate your own filter.
DataSource = DataSource.Where(...).ToList(); //Filter the DataSource based on the predicates you receive in dm.Where
}
...
if(TagsColumnCheck == "Tags") //Based on the clicked column(Tags) filter icon(i.e.) based on the stored variable value from TagsColumnCheck, return the CheckItemData which you have prepared in OnInitialized method
{
return CheckItemData; //Return CheckItemData alone
}
else
{
return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; //Return the Data to display in Grid.
}
}
}
...
public class Order //No need for new property as TagsName you can use the below model itself
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public List<Tag> Tags { get; set; } = new List<Tag>();
public List<Class> Classes { get; set; } = new List<Class>();
public List<Shop> Shops { get; set; } = new List<Shop>();
}
...
}
|
<EjsGrid @ref="GridInstance" ID="Filterid" TValue="ListItem" ...>
<EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager>
<GridEvents OnActionBegin="OnActionBegin" TValue="ListItem"></GridEvents>
...
</EjsGrid>
@code {
EjsDataManager DataManagerInstance;
EjsGrid<ListItem> GridInstance;
...
public void OnActionBegin(Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<ListItem> args)
{
if (args.RequestType.ToString() == "FilterBeforeOpen")
{
ColumnFilter = args.ColumnName;
JsRunTime.InvokeAsync<object>("filtercolfn"); //Invoke the Js function
}
...
}
public class CustomAdaptor : DataAdaptor
{
public List<ListItem> asr = new List<ListItem>();
public override object Read(DataManagerRequest dm, string key = null)
{
var OperatorForFilter = "";
var FieldForFilter = "";
var ds = DataSource.AsQueryable();
var hs = DataSource.AsQueryable();
if (ColumnFilter == "TagName")
{
return Tags;
}
else
{
if (dm.Search != null && dm.Search.Count > 0) ds = DataOperations.PerformSearching(ds, dm.Search);
if (dm.Sorted != null && dm.Sorted.Count > 0) ds = DataOperations.PerformSorting(ds, dm.Sorted);
if (dm.Where != null && dm.Where.Count > 0) //Create and use your own customized filter to filter the TagName column instead of using Grid's default PerformFiltering method.
{
WhereFilter tag = null;
List<string> tagfilter = new List<string>();
//In the below two if and else if statements we have fetched the predicates to be used to filter the TagName column from the DataManagerRequest argument
if (dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault()?.predicates == null)
{
tagfilter.Add(dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault().value.ToString());
OperatorForFilter = dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault().Operator;
FieldForFilter = dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault().Field;
}
else if (dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault()?.predicates.Count > 1)
{
foreach (var a in dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault()?.predicates)
{
tagfilter.Add(a.value.ToString());
}
OperatorForFilter = dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault().predicates.LastOrDefault().Operator;
FieldForFilter = dm?.Where?.LastOrDefault()?.predicates?.LastOrDefault().predicates.LastOrDefault().Field;
}
//Use the predicates fetched from the above statements to filter the TagName column.
if (FieldForFilter == "TagName")
{
if (OperatorForFilter == "notequal")
{
foreach (var str in tagfilter)
{
ds = ds.Where(o => !o.TagName.Contains(str));
asr.AddRange(ds);
}
}
else
{
foreach (var str in tagfilter)
{
ds = hs.Where(o => o.TagName.Contains(str));
asr.AddRange(ds);
}
}
asr = asr.Distinct<ListItem>().ToList();
ds = asr.AsQueryable();
}
//Use PerformFiltering to filter other columns except TagName
else
{
ds = DataOperations.PerformFiltering(ds, dm.Where, dm.Where[0].Operator);
}
}
...
return dm.RequiresCounts ? new DataResult
{
Result = result,
Count = count
} : (object)result;
}
}
}
}
[filtercol.js]
function filtercolfn() { //As by default the filter operator for TagName column will be equal, this will affect the filterchoices for other columns. So we have updated the filter operator for TagName column as contains. As contains is what to be used to filter the List of tags.
var gObj = document.getElementById("Filterid").ej2_instances[0];
if (gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length) {
for (var i = 0; i < gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length; i++) {
if (gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].field === "TagName") {
gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].operator = "contains";
}
}
}
}
|
[js]
var flag = true;
function filtercolfn(colname) {
var gObj = document.getElementById("Filterid").ej2_instances[0];
if (gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length) {
for (var i = 0; i < gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length; i++) {
if (gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].field === "TagName") {
gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].operator = "contains";
}
if (colname === "TagName" && gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].operator === "equal") {
gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].operator = "notequal";
flag = false;
}
}
}
}
function filtercolfnafter(colname) { //This method will restore the changed operator value in the above highlighted code.
var gObj = document.getElementById("Filterid").ej2_instances[0];
if (gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length) {
for (var i = 0; i < gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns.length; i++) {
if (!flag && colname === "filterafteropen") {
gObj.filterModule.filterModule.excelFilterBase.options.filteredColumns[i].operator = "equal";
}
}
flag = true;
}
}
[razor]
public void OnActionBegin(Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<ListItem> args)
{
if (args.RequestType.ToString() == "FilterBeforeOpen")
{
ColumnFilter = args.ColumnName;
JsRunTime.InvokeAsync<object>("filtercolfn",args.ColumnName); //Invoke the Js function
}
}
public void OnActionComplete(Syncfusion.EJ2.Blazor.Grids.ActionEventArgs<ListItem> args)
{
if (args.RequestType.ToString() == "FilterAfterOpen")
{
JsRunTime.InvokeAsync<object>("filtercolfnafter","filterafteropen"); //Invoke the Js function
}
}
public class CustomAdaptor : DataAdaptor
{
public List<ListItem> asr = new List<ListItem>();
public override object Read(DataManagerRequest dm, string key = null)
{
...
if (ColumnFilter == "TagName")
{
ColumnFilter = null;
return Tags;
}
...
}
}
|