filtering with more criteria for the same field

[Silvia Giunciuglio]

Hi all,

I need to set a filtering criteria on a grid column with more conditions, for example filter column values which begin with 'A' and contain 'B'

this is possible in grid HMI through excel filtering mode, but I need to do programmatically, in javascript code.

I made this way:

// put criteria such that values starting with 'A' are displayed, the others not

myGrid.filterByColumn("columnName", "startswith", "A", "and", false, false);

// put additional criteria such that values containing 'B' are displayed, the others not

myGrid.filterByColumn("columnName", "contains", "B", "and", false, false);

after this, I expected my criteria being applied, instead not. Looking into grid property filterSettings.columns I noticed only my second criteria was there.

It seems filterByColumn method can apply only one criteria per column.

How can I set a filter with more conditions for the same column value?

Please let me know,

Thank you,

Silvia

[Balaji Sekar]

Hi Silvia, 

 

Greetings from the Syncfusion support. 

 

We have validated your query with provided the information. By default, we can filter Grid with multiple queries using filterByColumn method for each query. It is reflect to the filter popup properly UI and filter module. 

 

If you want multiple filter queries in same column without affecting to the filter module, please refer the below code example and sample to achieve your requirement. 

 

[index.js] 

document.getElementById("filterBtn").addEventListener("click", function (e) { 

  var grid = document.getElementById("Grid").ej2_instances[0]; 

  var predicate = []; 

  predicate.push(new ej.data.Predicate("ProductName", 'startswith', "A", true)); 

  predicate.push(new ej.data.Predicate("ProductName", 'contains', "E", true)); 

  var complex = ej.data.Predicate.and(predicate); 

  var data = new ej.data.DataManager({ json: window.categoryData }).executeLocal(new ej.data.Query().where(complex)); 

  grid.dataSource = data; 

}) 

 

 

Sample link: https://stackblitz.com/edit/gl91ec-wuagfn?file=index.js 

Regards, 

Balaji Sekar 

[Silvia Giunciuglio]

Hi team,

I think there is a bit of misunderstanding. What I need is to obtain through javascript a grid filter settings similar to what can be done when filterSettings.type = Excel

so consider this screenshot:

Here user sets a filter on names starting with "P" or containing "TXT", using grid filter popup

I have to do the same through javascript but also allow the user to see the filtering and filter parameters in popup, just like he would input on HMI.

I tried with :

myGrid.filterByColumn("Name", "startswith", "P", "or", false, false);

myGrid.filterByColumn("Name", "contains", "TXT", "or", false, false);

but it did not work. Only the second call has effect, it seems the second call somehow overrides the first one rather than appending; I expected the two criteria were appended or merged since they have OR predicate on the same column Name

After settings the filters through javascript as above, only the second criteria is applied, the first is lost.

Indeed, when user opens the filtering popup, he can see only the second criteria, while the first is lost

So, how a similar filtering can be done on grid?

I don't think the approach of direct filtering through data manager, as you suggested would work for me.

Regards,

Silvia

[Ajith Govarthan]

Hi Silvia, 

Sorry for the inconveniences. 

We have validated your query and found that it is not feasible one to filter a column with two operator using the filterByColumn method for the same column.  

So, we suggest you to achieve your requirement using the previous update solution and if you use the previous update solution then the filtered column will not be updated in the filtered columns. 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Silvia Giunciuglio]

Hi team,

thank you for your clarification.

Unluckily, this is a feature that is required by our application, the capability to set a filter with both the filter ui or programmatically. If filterByColumn method does not support this, maybe there are other methods for this?

script of Syncfusion e2j.js is clearly able to do this, so how this can be done by our script? making a query through datamanager is not applicable for us.

Regards,

Silvia

[Ajith Govarthan]

Hi Silvia, 

Sorry for the inconveniences. 

Currently we are validating your requirement and we will update you on or before 1^st May 2020. 

Regards, 

Ajith G. 

[Ajith Govarthan]

Hi Silvia, 

Sorry for the inconveniences. 

We are facing complexities with your requirement so we will update further details on 7^th May 2020. 

Regards, 

Ajith G. 

[Silvia Giunciuglio]

ok, thank you for your work

[Ajith Govarthan]

Hi Silvia, 

Thanks for the patience. 

Based on your requirement we have prepared sample in that we have filtered CustomerName column with two operators and values. In the sample we have button outside the grid and when you click the button which will filter the customerName column and we have also used the actionBegin event which will be triggered for all the filtering actions. In the actionBegin event we have added the predicates in the filter columns to filter along with another operator. We have attached the sample so please refer the sample for your reference. 

CodeSnippet:  

Index.js 

actionBegin: function (args) { 

if ( args.requestType === "filtering" && args.currentFilteringColumn === "CustomerName" && flag) { 

flag = false; 

args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "CustomerName", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "contains", predicate: "and", uid: this.getColumnByField(args.currentFilteringColumn).uid, value: "c" }); 

} 

} 

var btn = document.getElementById('fltrbtn'); 

btn.addEventListener('click', function (args) { 

flag = true; 

var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

grid.filterByColumn("CustomerName", "startswith", "p", "and", false, false); 

}); 

Sample Link: https://stackblitz.com/edit/i3dbmq-q9nstk?file=index.js 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.