1. Home
  2. Forum
  3. Blazor
  4. Filtering data by RegExp

Filtering data by RegExp

I'm using Blazor server 19.3 version and I'm trying to apply the filtering rules to a specific column

My column can have the following data:

123

123NA

123NATER

123TER

123NPA

123PA

To filter rows having these specific values, I'm using the piece of code in attachment where I can filter data ends with "NATER" and "NAPA" but how can I capture only rows having numbers or ending with TER or ending with NA or ending with PA ?

If I use the operator "contains" supposing for "TER" I will get also NATER so it's not a solution




Attachment: test_331a5041.zip

11 Replies
RS Renjith Singh Rajendran Syncfusion Team October 19, 2021 08:36 AM UTC

Hi Walter, 

Greetings from Syncfusion support. 

We suggest you to refer to the below documentation for more details on the available filter operators in grid. 

Based on this scenario, we suggest you generate your custom filter text and filter the custom text using equal operator as like the code below. We have bind OnValueSelect event for Dropdown. Please refer and use as like the codes below, 

 
<DropDownListEvents OnValueSelect="OnValueSelect" TItem="Data" TValue="string"></DropDownListEvents>
 
public void OnValueSelect(@Syncfusion.Blazor.DropDowns.SelectEventArgs<Data> args) 
{ 
    if (args.ItemData.CustomerID == "All") 
    { 
        Gridfatcli.ClearFiltering(); 
    } 
    else 
    { 
        if (args.ItemData.CustomerID == "NATER" || args.ItemData.CustomerID == "NAPA") 
        { 
            Gridfatcli.FilterByColumn("CustomerID", "endswith", args.ItemData.CustomerID); 
        } 
        else 
        { 
            string customfiltervalue = "123" + args.ItemData.CustomerID; 
            Gridfatcli.FilterByColumn("CustomerID", "equal", customfiltervalue); 
        }      
    } 
} 



Please get back to us if you need further assistance. 

Regards, 
Renjith R 


WM Walter Martin October 19, 2021 09:59 AM UTC

Thanks for this reply, but I think I didn't axplain my problem well.

In my attachment I used the ValueChange="@Change" event instead of your OnValueSelect="OnValueSelect" but I think it's the same 

When I select in the dropdownlist "Digits" I want to show customerid made up of only digits like 123, 456, 788, and so on for this reason "equal" is not the right solution. I suppose using a RegExp expression would work but I can't use it in the filter options I think.

Also, if I select "TER" in the dropdownlist I want to show only customerid like 123TER, 456TER, 788TER and so on, but if I use "contains" or "endswith" I will show also 123NATER, 456NATER... and I don't want it


this is what is working at the moment for NA, PA, NATER, NAPA


    public void Change(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Data> args)

    {

        if (args.Value == "All")

        {

            Gridfatcli.ClearFiltering();

        }

        else

        {

            if (args.ItemData.NUMFATT == "NATER" || args.ItemData.NUMFATT == "NAPA" || args.ItemData.NUMFATT == "NA" || args.ItemData.NUMFATT == "PA")

                Gridfatcli.FilterByColumn("NUMFATT", "endswith", args.Value);

            else if (args.ItemData.NUMFATT == "Digits")

//What here ?

            else  if (args.ItemData.NUMFATT == "TER")

//what here ?

        }

    }




RS Renjith Singh Rajendran Syncfusion Team October 20, 2021 08:53 AM UTC

Hi Walter, 

We would like to inform you that, by default filtering will be performed in Grid only based on the filterkey passed in FilterByColumn method and applying any of our available filter operators. This is the default behavior of performing filtering action in grid. 

So, based on your scenario, we suggest you to handle the filtering programmatically based on your requirement by using custom way of binding data to Grid.  

When binding data using CustomAdaptor you can programmatically handle the DataOperations based on your requirement. So based on the filter key you are passing, we suggest you to customize and filter from the DataSource of Grid and return the result from Read method of CustomAdaptor class. We have also prepared a sample based on this suggestion, please download the sample from the link below, 
 
Please refer the codes below, 

 
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 
            if (dm.Where[0].predicates[0].value == "NATER" || dm.Where[0].predicates[0].value == "NAPA" ...) 
            { 
                //filter action using inbuilt PerformFiltering method 
                DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);    
            } 
 
            //Handle custom filtering action based on your requirement as like below highlighted. 
            //Custom filtering action 
            else if(dm.Where[0].predicates[0].value == "TER") 
            { 
                DataSource = DataSource.Where(e => Regex.Replace(e.CustomerID,  @"[\d-]", string.Empty).Equals(dm.Where[0].predicates[0].value)); 
            } 
            else if(dm.Where[0].predicates[0].value == "Digits") 
            { 
                DataSource = DataSource.Where(e => Regex.Matches(e.CustomerID, @"[a-zA-Z]").Count == 0); 
            } 
        } 
        ... 
        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; 
    } 
} 


Please get back to us if you need further assistance. 

Regards, 
Renjith R 


WM Walter Martin October 21, 2021 08:15 PM UTC

many thanks

It works as expected in this way.

I'd like also to filter the OrderDate field using a SfDateRangePicker component showing it when clicking inside the 

FilterItemTemplate of that field but if I place it there, it's not opened


            <FilterItemTemplate>

                <SfDateRangePicker @bind-StartDate="@StartValue" @bind-EndDate="@EndValue" TValue="DateTime?" Placeholder="select range" ShowClearButton="true">

                    <DateRangePickerEvents TValue="DateTime?" ValueChange="FilterDateColumn" />

                </SfDateRangePicker>

            </FilterItemTemplate>


If I have to place this component outside the datagrid, how can it work in combination with the other filters inside the CustomAdaptor ?




RS Renjith Singh Rajendran Syncfusion Team October 22, 2021 08:47 AM UTC

Hi Walter, 

We suspect that you are facing difficulties in rendering the SfDateRangePicker inside Grid’s filterbar. If so, then from your previous updates, we could see that you are using FilterBar mode of filtering in Grid. So at these cases, we suggest you to ensure to use FilterTemplate instead of FilterItemTemplate to render custom components in Grid filter bar. 

 
<FilterTemplate> 
    <SfDateRangePicker ...></SfDateRangePicker> 
</FilterTemplate> 


Please check this from your side, and if we have misunderstood your query, then the following details would be helpful for us to proceed further. 

  1. Share a detailed explanation of the problem you are facing.
  2. Share a video demo explaining the problem or requirement.
  3. Share the complete Grid rendering codes which you have tried from your side.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R 


WM Walter Martin October 22, 2021 01:53 PM UTC

I'm sorry... my mistake

using  <FilterTemplate>  the component is showed correctly

I add you in attachment your sample where I inserted the daterangepicker in the orderdate column

What can I write in the daterangepicker event to call the customadaptor and filter the data accordingly ?

I don't find a solution in the documentation

Thanks


Attachment: OrderDate_af3f21c3.zip

RS Renjith Singh Rajendran Syncfusion Team October 25, 2021 11:53 AM UTC

Hi Walter, 

Based on this custom scenario, we suggest you to generate custom GridFilterColumn and assign to . Now on Grid Refresh, the Read method will be triggered. In this based on the DataManagerRequest query perform your custom filter action and return the DataSource to be displayed in Grid. 

 
private async Task FilterDateColumn(RangePickerEventArgs<DateTime?> args) 
{ 
    //what can I write here to filter for OrderDate range values  ? 
    if (Gridfatcli.FilterSettings.Columns == null) 
    { 
        Gridfatcli.FilterSettings.Columns = new List<GridFilterColumn>(); 
    } 
    var a = await Gridfatcli.GetColumns();   //Get all the Grid columns 
    string fUid = a[2].Uid;            //Fetch the Uid of OrderDate column 
    List<GridFilterColumn> gridFilteredColumns = Gridfatcli.FilterSettings.Columns.ToList(); 
    foreach(GridFilterColumn DateCol in gridFilteredColumns) 
    { 
        if (DateCol.Field == "OrderDate") 
        { 
            Gridfatcli.FilterSettings.Columns.Remove(DateCol); 
        } 
    } 
    Gridfatcli.FilterSettings.Columns.Add(new GridFilterColumn { Field = "OrderDate", Operator = Syncfusion.Blazor.Operator.GreaterThanOrEqual, Predicate = "and", Value = args.StartDate, Uid = fUid }); 
    Gridfatcli.FilterSettings.Columns.Add(new GridFilterColumn { Field = "OrderDate", Operator = Syncfusion.Blazor.Operator.LessThanOrEqual, Predicate = "and", Value = args.EndDate, Uid = fUid }); 
    Gridfatcli.Refresh();     //Call Refresh to reflect the filtered changes in Grid  
} 

    public override object Read(DataManagerRequest dm, string key = null)    {         ...        if (dm.Where != null && dm.Where.Count > 0)        {            // Filtering            ...            else            {                DataSource = DataSource.Where(e=> (e.OrderDate <= (DateTime)dm.Where[0].predicates[0].predicates[1].value && e.OrderDate>=((DateTime)dm.Where[0].predicates[0].predicates[0].value)));            }        }        ...        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;    }

We have also modified the sample for your convenience, please download the sample from the link below, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith R 


WM Walter Martin October 25, 2021 09:07 PM UTC

It works in this way... thanks, but not completely because all the possible filters of the filter bar don't work together in and condition since the pretidicate index depends on the user's choice order

If I filter first by CustomerID and then by orderdate it doesn't filter both

Is there a way to accomplish this ?

 




RS Renjith Singh Rajendran Syncfusion Team October 26, 2021 07:23 AM UTC

Hi Walter, 

When using custom way of binding in Grid, when performing a dataoperation action(filter or sort etc.), the query for the DataOperation will be available in the DataManagerRequest parameter of the Read method. Based on the query you receive in this DataManagerRequest, you need to customize and handle the data operations based on your scenario/requirement. 

We have modified the sample to handle the filtering actions inside Read method based on query generated when filtering multiple fields. Please download the modified sample from the link below, 
 
Please refer the codes below, 

 
if (dm.Where != null && dm.Where.Count > 0) 
{ 
    foreach(var filter in dm.Where[0].predicates) 
    { 
        //for CustomerID column 
        if (filter.value == "NATER" || filter.value == "NAPA" || filter.value == "NA" || filter.value == "PA") 
        { 
            DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
        } 
        else if (filter.value == "TER") 
        { 
            DataSource = DataSource.Where(e => Regex.Replace(e.CustomerID, @"[\d-]", string.Empty).Equals(filter.value)); 
        } 
        else if (filter.value == "Digits") 
        { 
            DataSource = DataSource.Where(e => Regex.Matches(e.CustomerID, @"[a-zA-Z]").Count == 0); 
        } 
        else if(filter.Field == null && filter.predicates[0].Field == "OrderDate") 
        { 
            //for OrderDate column 
            DataSource = DataSource.Where(e=> (e.OrderDate <= (DateTime)filter.predicates[1].value && e.OrderDate>=((DateTime)filter.predicates[0].value))); 
        } 
        else 
        { 
            //for other columns - OrderID, Freight 
            DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
        } 
    } 
} 


Please refer the above sample and handle your custom data operation action based on the DataManagerRequest query in Read method. 

Regards, 
Renjith R 


WM Walter Martin October 26, 2021 08:13 PM UTC

thanks a lot

now it works perfectly



RS Renjith Singh Rajendran Syncfusion Team October 27, 2021 05:11 AM UTC

Hi Walter, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon