TreeGrid lostes focus on record add

[Zachary]

I have this code to set focus to a textbox on a row in the treegrid. It works very good for a double click beginEdit event.

      var item = args.form.elements.namedItem('payee');

      var htmlItem = item as HTMLElement;

      htmlItem. focus();

However, when I add a record using a button and invoke it on the add requestType the field seems to briefly have focus then loses it. Is there another event or way I can set the focus on record add events?

  public onActionComplete(args: EditEventArgs) {

    if(args.requestType === "add")

    {

....

  this.treegrid.editSettings.newRowPosition = "Top";

    this.treegrid.closeEdit();

    this.treegrid.addRecord();

[Farveen Sulthana Thameeztheen Basha]

Hi Zachary, 

 

Thanks for your interest in Syncfusion Components. 

 

Query#:- when I add a record using a button and invoke it on the add requestType the field seems to briefly have focus then loses it. Is there another event or way I can set the focus on record add events? 

 

We have prepared sample by using addRecord method on button click but we are unable to replicate the problem from using your code example(Focus doesn’t get lose until we click on any other places). 

 

Refer to the sample Link:- 

https://stackblitz.com/edit/angular-lxf95c-9hns25?file=app.component.ts 

 

Screenshot:- 

 

 

 

So we need some more additional details to find the cause of the issue. Share us the following details. 

 

1. Complete TreeGrid code details.
2. If possible replicate it in the above sample and revert us back.
3. When you have lost focus(Share video demo to replicate the issue)

 

The provided details will be helpful for further validation at our end. 

 

Regards, 

Farveen sulthana T 

[Zachary]

Hi Farveen,

What's happening is that the user may have a row open, so I am calling closeEdit before addRecord. I've modified your sample with that code and now the issue should be showing up.

https://stackblitz.com/edit/angular-lxf95c-shs4wi?file=app.component.html

[Farveen Sulthana Thameeztheen Basha]

Hi Zachary,  

We are able to replicate the reported problem at our end. Both actions such as closeEdit and addRecords method has been called simultaneously, so focus not set properly for that particular field. We need to set focus once the action has been completed(i.e form has been rendered).  To overcome this, we have set focus with certain time delay. 

Refer to the code below:- 

actionComplete(args) 

        { 

            if (args.requestType == 'beginEdit' || args.requestType == 'add') 

            { 

                var item = args.form.elements.namedItem('approved'); 

                var htmlItem = item as HTMLElement; 

                setTimeout(function() { 

                    htmlItem.focus(); 

                }, 0); 

            } 

        } 

 

Modified link:- https://stackblitz.com/edit/angular-lxf95c-ygfyc1?file=app.component.ts 

 

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

Regards, 

Farveen sulthana T