We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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. 

When debugging i narrowed it a bit down, that the "actionBeginEvent" and "actionCompletedEvent" were sometimes coming incorrectly in Internet Explorer. But it never worked even when the event was coming normally. 

Attachment: SimpleGridHeaderWithSearch_cc3a5099.7z

1 Reply

PS Pavithra Subramaniyam Syncfusion Team January 31, 2019 12:37 AM

 
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; 
    } 
  } 
  }... 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon