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

[Emiliano]

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",
     ...
},

[Emiliano]

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

[Thiyagu Subramani]

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); 

        } 

      }, 

Sample link: https://stackblitz.com/edit/avphkg-kgcjhv?file=index.js 

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

Regards, 

Thiyagu S. 

[Emiliano]

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.

[Thiyagu Subramani]

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); 

Modified sample : https://stackblitz.com/edit/avphkg-jsfbd8?file=index.js 

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

Regards, 

Thiyagu S 

[Emiliano]

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

Detect languageAfrikaansAlbanianAmharicArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CorsicanCroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchFrisianGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHawaiianHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanKurdishKyrgyzLaoLatinLatvianLithuanianLuxembourgishMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPashtoPersianPolishPortuguesePunjabiRomanianRussianSamoanScots GaelicSerbianSesothoShonaSindhiSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshXhosaYiddishYorubaZulu

AfrikaansAlbanianAmharicArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CorsicanCroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchFrisianGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHawaiianHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanKurdishKyrgyzLaoLatinLatvianLithuanianLuxembourgishMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPashtoPersianPolishPortuguesePunjabiRomanianRussianSamoanScots GaelicSerbianSesothoShonaSindhiSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshXhosaYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close

[Thiyagu Subramani]

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'; 

        } 

      } 

   } 

} 

Modified Sample link: https://stackblitz.com/edit/avphkg-pc5vff?file=index.js 

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. 

[Emiliano]

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.

[Thiyagu Subramani]

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