We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

FilterBaseStatus message does not show the filters applied to the grid correctly

When i have a Grid with FilterBar, and a column with numeric type and data type, if i put the filters in the image, the message does not show the filters applied correctly:


I think the message should show this:
EmployeeID: <3 && Order Date: >7/31/1996 && Order Date: <7/31/1996.

Another possible improvement is to change the && operator, for english or translated words, maybe?
It was more readable if it said:
EmployeeID: <3 AND Order Date: >7/31/1996 AND Order Date: <7/31/1996

Or by replacing them with the translated words of the QueryBuilder:
(In my case, portuguese)
"querybuilder": {
     ...
     "AND": "E",
     "OR": "OU",
     ...
},


8 Replies 1 reply marked as answer

EM Emiliano December 17, 2020 02:34 PM UTC

Just for information, the DateRangePicker is a custom component that can be seen here.


TS Thiyagu Subramani Syncfusion Team December 18, 2020 11:15 AM UTC

Hi Emiliano, 

Thanks for contacting Syncfusion forum. 

We have achieved your requirement in sample level using actionBegin and actionComplete event. Using actionComplete event we have updated filter text value in bottom using updateExternalMessage method in pagerModule.   

Please refer to the below code and sample link. 

 actionBegin: function(args){ 
    if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate" && customFilter) { 
            customFilter = false; 
            args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, 
           operator: "lessthan", predicate: "and", uid: this.getColumnByField(args.currentFilteringColumn).uid, value: endDate }); 
        } 
  }, 

actionComplete: function(args) { 
    if (args.requestType === "filtering" & args.action === 'filter' ) { 
      var text = ''; 
      var operator = ''; 
       for (var i =0; i< args.columns.length; i++) { 
         if(i >0 ){ 
           text = text + '& '; 
         } 
         if (args.columns[i].operator === 'lessthan') { operator = "<"}; if (args.columns[i].operator === 'greaterthan') { operator = ">"} 
         value = args.columns[i].value; 
         if(args.columns[i].field == 'OrderDate'){ 
           value = ej.base.Internationalization.prototype.formatDate(args.columns[i].value, { format: 'M/d/y'}); 
         } 
         text = text + ' ' + args.columns[i].field + ":" + operator + value;    // text generated based on field, operator and value  
       } 
       grid.pagerModule.updateExternalMessage(text) ;   // Modified text updated in bottom 
       globalText = text; 
    } 

      if (args.requestType === "filtering" & args.action === 'clearFilter' ) { 
             // Text will be modified after clear filtering for particular column. 
               var filterText = ''; 
               var arr = globalText.split('&'); 
               for (var i = 0; i < arr.length; i++){ 
                 if(!arr[i].includes(args.currentFilterColumn.field)) { 
                    filterText = filterText + arr[i]; 
                 } 
               } 
                grid.pagerModule.updateExternalMessage(filterText); 
      } 
  }, 

create: function(args) { 
          var elem = document.createElement("input"); 
          return elem; 
        }, 
        write: function(args) { 
          var gridObj = document.getElementsByClassName("e-grid")[0] 
            .ej2_instances[0]; 
          var datapicker = new ej.calendars.DateRangePicker({ 
            change: function(e) { 
              var target = e.element; 
              var grid = document.getElementById("Grid").ej2_instances[0]; 
              if (e.value) { 
                startDate = e.value[0]; 
                endDate = e.value[1]; 
                customFilter = true; 
                grid.filterByColumn("OrderDate", "greaterthan", startDate); 
              } else { 
                grid.filterSettings.columns = []; 
                grid.removeFilteredColsByField(target.id); 
              } 
            } 
          }); 
          datapicker.appendTo(args.element); 
        } 
      }, 



Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 



EM Emiliano December 18, 2020 12:36 PM UTC

Some problems with your solution:

If i clear the date range filter, it clears all the other filters.

If i manually input the date range text, it does not work correctly. (allready submitted by me in this ticket)


If change the date range filter, it adds to the message status.

And the problem that it's having to declare a filter in the 'actionBegin' event and having the column name hardcoded.
If you check this this, you can see that i have developed some code to this custom component working in ANY grid, just with one line of code in the column grid.







TS Thiyagu Subramani Syncfusion Team December 22, 2020 02:22 AM UTC

Hi Emiliano, 

Thanks for your update. 

Based on your shared information we have achieved your requirements using below code block in change event. Please refer to the below code and sample link. 

 var datapicker = new ej.calendars.DateRangePicker({ 
            change: function(e) { 
              var target = e.element; 
              var grid = document.getElementById("Grid").ej2_instances[0]; 
              if (e.value) { 
                startDate = e.value[0]; 
                endDate = e.value[1]; 
                customFilter = true; 
                var filterArray = []; 
                for ( var i = 0; i < grid.filterModule.filterSettings.columns.length; i++) { 
                  if ( grid.filterModule.filterSettings.columns[i].field != "OrderDate") { 
                    filterArray.push(grid.filterModule.filterSettings.columns[i]); 
                  } 
                } 
                grid.filterModule.filterSettings.columns = filterArray; 
                grid.filterByColumn("OrderDate", "greaterthan", startDate); 
              } 
              if (e.value === null) { 
                var filterArray = []; 
                for ( var i = 0; i < grid.filterModule.filterSettings.columns.length; i++) { 
                  if ( grid.filterModule.filterSettings.columns[i].field != "OrderDate") { 
                    filterArray.push(grid.filterModule.filterSettings.columns[i]); 
                  } 
                } 
                grid.filterModule.filterSettings.columns = filterArray; 
              } 
            } 
          }); 
          datapicker.appendTo(args.element); 



Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Marked as answer

EM Emiliano December 22, 2020 02:20 PM UTC

  1. If i clear the date range filter, it clears all the other filters.
  2. If i manually input the date range text, it does not work correctly. (allready submitted by me in this ticket)
  3. If change the date range filter, it adds to the message status.
  4. And the problem that it's having to declare a filter in the 'actionBegin' event and having the column name hardcoded.

Your solution solved the problems 1 and 3.
The point 2 still happens. I allready solved the point 4 in this ticket, but it has a problem.
I was hoping to get another way to prevent some problems i encountered.
G
M
T
Text-to-speech function is limited to 200 characters


TS Thiyagu Subramani Syncfusion Team December 24, 2020 01:43 PM UTC

Hi Emiliano, 

Thanks for your update. 

Query: If i manually input the date range text, it does not work correctly.  
 
Based on your suggestion we have achieved your requirement using below code in actionBegin event. 

actionBegin: function (args) { 
if(args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate"){ 
      for(var i= 0; i< args.columns.length ; i++) { 
        if (args.columns[i].field === 'OrderDate' && args.columns[i].value  === null){ 
            args.columns[i].value = document.getElementsByClassName('e-daterangepicker')[0].ej2_instances[0].value[0]; 
            args.columns[i].operator = 'greaterthan'; 
        } 
      } 
   } 


Query : The problem that it's having to declare a filter in the 'actionBegin' event and having the column name hardcoded. 

For this we have already shared response in this ticket’s previous update. Please refer it. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 



EM Emiliano January 4, 2021 12:34 PM UTC

Query : The problem that it's having to declare a filter in the 'actionBegin' event and having the column name hardcoded. 

For this we have already shared response in this ticket’s previous update. Please refer it.

The shared response you indicate does not solve the problem! It still indicates to put a hardcoded filter in the actionbegin event.
As i said in my previous response, i developed some code to this custom component working in ANY grid, just with one line of code in the column grid.
And i want to try to avoid the filter in the actionbegin. Because if i have several grids with several date columns, i have to put a hardcoded filter for each data column i want to put the daterangepicker custom component.


TS Thiyagu Subramani Syncfusion Team January 6, 2021 01:15 AM UTC

Hi Emiliano, 

Thanks for your update. 
 
Query : The problem that it's having to declare a filter in the 'actionBegin' event and having the column name hardcoded.  

We have shared response for this above query in this ticket. So, please follow this ticket for further assistance. 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S 


Loader.
Live Chat Icon For mobile
Up arrow icon