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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Remove focus after grid selection using dataBound event and selectRows() method.

Thread ID:

Created:

Updated:

Platform:

Replies:

145757 Jul 7,2019 06:23 AM UTC Jul 8,2019 11:04 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Goutham
Asked On July 7, 2019 06:23 AM UTC

Hi,
     I am using external search box(using ejs-textbox) for searching grid.i.e calling an rest api for every input (using input event) to get searched results.When i get searched result,filling the grid with searched result and selecting some of the rows using event dataBound and method selectRows(),this process fine for my requirement,But problem arise where i am losing focus of search box after selecting rows.

Requirement:Focus should be on search box ,so that user can type continuously.

reference screen:


Thank you .

Pavithra Subramaniyam [Syncfusion]
Replied On July 8, 2019 08:59 AM UTC

Hi Goutham, 

Thanks for contacting Syncfusion. 

You can achieve your requirement by calling the focusIn method of TextBox component inside the dataBound event. Please find the below code snippet: 

[app.component.html] 
. . .  
<ejs-textbox #textbox (input)="input($event)"></ejs-textbox> 
    <ejs-grid #grid [dataSource]='data' (dataBound)="dataBound($event)" height='350'> 
        <e-columns> 
          <e-column type="checkbox" width='50'></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width='120' textAlign='Right'></e-column>             
        </e-columns> 
    </ejs-grid> 
. . .  

[App.component.ts] 

. . . 
ngOnInit(): void { 
        this.data = orderDetails; 
   
    input(e){ 
      this.flag=true; 
      this.grid.search(e.value);       
   
    dataBound(e){ 
      if(this.flag){ 
      this.grid.selectRows([1,2]); 
      this.flag= false; 
     setTimeout((e)=>{ this.Search_box.focusIn();},) 
     
   
 
. . .  

We have prepared a sample based on your requirement. Please find the below sample: 

Sample                     : https://stackblitz.com/edit/angular-ets1j1-fwe2ix?file=app.component.ts 


Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Goutham
Replied On July 8, 2019 10:08 AM UTC

Thank you for your quick response.

The above mentioned problem has solved but the selection of records is changing for every search according to index.

requirement: pre-selection should happen by ids (primary key id) not by index.

is there any way to get searched records(rendered),so that i can filter again to select row indexes(by ids) for event dataBound.



Pavithra Subramaniyam [Syncfusion]
Replied On July 8, 2019 10:25 AM UTC

Hi Goutham, 

You can get the search result in the “beforeDataBound” event of Grid component. The “args.result” will contain the Grid records. 


Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 


Goutham
Replied On July 8, 2019 10:55 AM UTC

Thank you very much.Every thing working fine.

Pavithra Subramaniyam [Syncfusion]
Replied On July 8, 2019 11:04 AM UTC

Hi Goutham, 

Thanks for your update. 
 
We are happy to hear that everything is working fine now. 
 
Please get back to us if you need any further assistance on this. 
 
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

Live Chat Icon For mobile
Live Chat Icon