Grid - Filtering a column by multiple filter strings leaves visual inconsistencies

Question

Hello SyncFusion team,

I found out that - if you want to apply more than one filter on a column - there are 2 visual problems appearing in the SyncFusion Angular Grid.
Therefore, here is my filter call: (filterIndices is a number[] and in the following example equals [1,2,3,4,5,6,7])

this.gridObj.filterByColumn('id', 'equal', filterIndices);

When I apply this filter, I get the correct filtered grid, but!

1) The filter string in the grid only displays the last element (7)
2) The filter below the grid displays Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 instead of 1-7.

The attached image demonstrates these two problems.

Is there a way to display that correctly? And if not, is it at least possible to hide the message below the grid?

Thanks in advance!

Attachment: visualFilterBug_2dc5447b.zip

Rajapandiyan Settu · Accepted Answer

Hi Jonas,  

Greetings from syncfusion support. 

Query #1 : The filter string in the grid only displays the last element (7) 

By default filterBar is used to filter a single value in the column, we can also filter multiple value in a column by using filteByColumn method. but the filterBar shows only last filtered value, since the filterBar filters single value. This is behavior of the filterBar in EJ2 Grid. 
 
Query #2 : The filter below the grid displays Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 && Id: 7 instead of 1-7. Is there a way to display that correctly? 
 
Yes, we can customize the filter summary panel content. We have achieved this by using actionComplete event with requestType as filtering and by setting enableExternalMessage to true as demonstrated in the below code snippet, 





actionComplete(args: any) { 
    if (args.requestType === 'filtering') { 
      this.grid.pagerModule.pagerObj.enableExternalMessage = true; 
// get the filtered column details 
      var filteredCols = (this.grid.filterModule as any).filterSettings.columns; 
      var filteredColsName = [] 
      for (var i = 0; i < filteredCols.length; i++) { 
        if (filteredColsName.indexOf(filteredCols[i].field) < 0) { 
// push the distinct filter column field in an array 
          filteredColsName.push(filteredCols[i].field); 
        } 
      } 
// create a message using filtered columns field and its filter value which will be shown in the filter summary 
      var messagevl = ''; 
      for (var j = 0; j < filteredColsName.length; j++) { 
        var colname = filteredColsName[j]; 
        var values = ''; 
        for (var k = 0; k < filteredCols.length; k++) { 
          if (filteredColsName[j] == filteredCols[k].field) { 
            if (k == filteredCols.length - 1) { 
              values = values + filteredCols[k].value 
            } else { 
              values = values + (filteredCols[k].value + ',') 
            } 
          } 
        } 
        if (j == filteredColsName.length - 1) { 
          messagevl = messagevl + (colname + ' - ' + values) 
        } 
        else { 
          messagevl = messagevl + (colname + ' - ' + values + ' &&') 
        } 
      } 
// bind the custom message 
      this.grid.pagerModule.pagerObj.externalMessage = messagevl; 
    } 
  } 


Sample : https://stackblitz.com/edit/angular-fpuaxf-gwtqry?file=app.component.ts 

Please get back to us if you need further assistance on this.  

Regards,  
Rajapandiyan S

Jonas Czeslik · Answer

Thanks a lot! This will work!

Rajapandiyan Settu · Answer

Hi Jonas,  

We are glad that the provided solution is resolved your requirement and always happy to assists you. 

Regards,  
Rajapandiyan S