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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customheader with Sorting and Searchfunction not working in IE

Thread ID:

Created:

Updated:

Platform:

Replies:

142337 Jan 29,2019 07:59 AM UTC Jan 31,2019 08:37 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Patrick
Asked On January 29, 2019 08:01 AM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On January 31, 2019 08:37 AM UTC

 
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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;