Persisted filters not populating inputs

[David Faux]

<ejs-grid id="example" #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]="pageOptions" enablePersistence="true">

        <e-columns>

            <e-column field='CategoryName' headerText='Category Name' width='170'></e-column>

            <e-column field='ProductName' headerText='Product Name' width='150'></e-column>

            <e-column field='QuantityPerUnit' headerText='Quantity per unit' width='180' textAlign='Right'></e-column>

            <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column>

        </e-columns>

    </ejs-grid>

Example https://stackblitz.com/edit/angular-8czaxx

With persistence and filtering enabled and performing a filter that returns zero results when refreshing the page or navigating away and returning the filters are still applied however the user cannot clear them as they're no longer listed in the inputs.

[Thiyagu Subramani]

  

Hi David, 

Thanks for contacting Syncfusion support. 

Based on your reported information we are unclear about the mentioned query. So, we suspect your reported issue is “Filtered text does not persist after refresh”.  

For more information. Please refer the below images. 

Sample link :  https://stackblitz.com/edit/angular-8czaxx 

1.Filter the Category Name column as “see” like below. 

 

2. Refresh the page. Filters are still applied but filtered value doesn’t maintained in input. 

 

Please confirm whether the above issue that you are mentioning in your application. If we misunderstood your query please provide more information regarding your query by pictorial or video demonstration. 

Regards, 

Thiyagu S. 

[David Faux]

Hi Thiyagu

Yes that is the issue that I've come across

Regards

David

[Thiyagu Subramani]

Hi David, 

Thanks for your update. 

The reported issue is already known issue from our side and it will be refreshed any of our upcoming release. 

Until that time we suggest to use below workaround solution. Currently, entered  text is not persisted in filter bar input but it stored filtersettings columns. So we can render the filtered value by using dataBound event programmatically. 

Please refer to the below code and sample link. 

public dataBound(args) { 

    if (this.flag) { 

      var filter = []; 

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

      if (gridObj.currentViewData.length == 0) { 

        if (gridObj.filterSettings.columns.length > 0) { 

          for (var i = 0; i < gridObj.filterSettings.columns.length; i++) { 

            filter.push(gridObj.filterSettings.columns[i].field) 

          } 

        } 

        for (var j = 0; j < gridObj.element.querySelectorAll('.e-filterbarcell').length; j++) { 

          for (var k = 0; k < filter.length; k++) { 

            if (gridObj.element.querySelectorAll('.e-filterbarcell')[j].getElementsByTagName('input')[0].id.split('_')[0] === filter[k]) { 

              gridObj.element.querySelectorAll('.e-filterbarcell')[j].getElementsByTagName('input')[0].value = gridObj.filterSettings.columns[k].value 

            } 

          } 

        } 

      } 

      this.flag = false; 

    } 

  } 

Sample link : https://stackblitz.com/edit/angular-8czaxx-buwebv?file=app.component.html 

Reference link  : https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 

https://ej2.syncfusion.com/angular/documentation/api/grid/#filtersettings 

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

Regards, 

Thiyagu S.