DataGrid : show Filter Summary Panel when we use Filter Menu instead of Default Filter?

How to show Filter Summary Panel when we use Filter Menu (Text/ Checkbox / Excel) instead of Default Filter?

Please refer attached screenshot. 

1. Default Filter shows Summary
2. Using Filter Menu - Filter Summary not available.

Thanks,
Kaushal

Attachment: GridFilter_26813559.zip

1 Reply 1 reply marked as answer

SM Shalini Maragathavel Syncfusion Team July 8, 2020 10:08 AM UTC

Hi Kaushal, 
 
Greetings from Syncfusion support. 
 
Query: “show Filter Summary Panel when we use Filter Menu 
 
To achieve the above requirement we suggest you to use actionComplete event of EJ2 Grid. In actionComplete event we have check the requestType as filtering and enable enableExternalMessage to true. 
 
Using filter columns from the filterModule we have created the external message and assigned to the externalMessage of pagerModule. 
 
Find the code example: 
 
actionComplete(args: any) { 
 
    if (args.requestType === 'filtering') { 
     
      this.grid.pagerModule.pagerObj.enableExternalMessage = true; 
 
      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) { 
          filteredColsName.push(filteredCols[i].field);  //to get the filtered column fields 
        } 
      } 
 
      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) { 
            values = values + (filteredCols[k].value + ',')   //to get the filtered values 
          } 
 
        } 
        if (j == filteredColsName.length - 1) { 
          messagevl = messagevl + (colname + ' - ' + values) 
        } 
        else { 
          messagevl = messagevl + (colname + ' - ' + values + ' &&') 
        } 
      } 
            this.grid.pagerModule.pagerObj.externalMessage = messagevl;  //to display in summary panel 
    } 
 
 
  } 
  public onChange(e: ChangeEventArgs): void { 
    this.grid.filterSettings.type = <FilterType>e.value; 
    this.grid.clearFiltering();   
  } 
} 
 
Please check below sample for your reference. 
Let us know if you have any concerns. 
Regards, 
Shalini M. 
 
 
 


Marked as answer
Loader.
Up arrow icon