Customheader with Sorting and Searchfunction not working in IE

Hello, 

for a project we need to implement a custom headerTemplate in the Gridcomponent. The expected behaviour is the custom headerTemplate to have a Title and an input to search this column. When someone clicks on the Title, the column should be sorted using the default functionallity "allowSorting = true". When the user clicks on the Input, the Grid should not be sorted and he should be able to search the column by typing in the input. 

I created a sample app where this behaviour is implemented and working in Chrome version 71.0.3578.98, but not in Internet Explorer version 11.523.17134.0. 

Hi Patrick, 

 

Greetings from Syncfusion. 

 

Query: I created a sample app where this behaviour is implemented and working in Chrome version 71.0.3578.98, but not in Internet Explorer version 11.523.17134.0. 

 

We have analyzed your query and the cause of this issue is, whenever a click is made in the header, input element is focused which further calls the grid search method. So due to the search method grid refreshes and loses the focus. So we have made some changes in your onSearchChange event as shown below. Please refer to the below sample as well for your reference, 

 

Code Example:  

 

[.ts] 

...  onSearchChange(query: string) {      if(!isNullOrUndefined(query)){      if(query != ''){        this.grid.search(query);        this.isSearch = true;      }      else if(this.isSearch && query == ''){        this.grid.search(query);        this.isSearch = false;      }    }    }...

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridHeaderTemplate422023634  

 

Please get back to us for further assistance. 

 

Regards, 

Pavithra S.