Bugs/issues with keystrokes when adding a treegrid row with parameters

I wanted to report some behavior, which I believe may represent bugs with how the treegrid control is working and I'm hoping you might have a workaround to help get things working for me.


Issue 1) When I add a row with parameters clicking the escape key to cancel no longer works.

a) Call add record with parameters

b) wait until the grid refreshes twice then call select row

c) on the select row event call start edit

The row is added and focus is set, but when I hit the escape key I cannot cancel out of the edit. You can see this by clicking add child on the 2nd add child button down in the demo.

Is there an event that fires after the selected event that might work better to call StartEdit and avoid this issue?

Issue 2)  When I add a row with parameters the enter key does not work to save the row.

    this.treegrid.addRecord(newCat, this.rowIndex, "Above");
        this.treegrid.selectRow(this.rowIndex);
        this.treegrid.startEdit();

You can see this by clicking on the add child ideal button in the demo.

Issue 3) This is more of a suggestion, but when you add record, the add event does not get fired, instead the refresh event gets fired twice. it would be nice if it was consistent across calls.




Attachment: addrowissues_d8326c6b.zip

7 Replies 1 reply marked as answer

ZA Zachary October 17, 2021 04:45 PM UTC

Attaching video for issue 1



Attachment: escape_button_not_working_video_cb9d8e8.zip


ZA Zachary October 17, 2021 04:46 PM UTC

Attaching video for issue 2



Attachment: enter_key_not_working_24da055a.zip


MP Manivannan Padmanaban Syncfusion Team October 18, 2021 01:20 PM UTC

Hi Zachary, 

Thanks for contacting Syncfusion Support. 

Currently we are validating your queries and will update you the response on or before October 21, 2021. Meanwhile, if we need any further details will request you. 

Until then, we appreciate your patience. 

Regards, 
Manivannan Padmanaban 



PS Pon Selva Jeganathan Syncfusion Team October 21, 2021 12:03 PM UTC

Hi Zachary 
 
Thanks for contacting syncfusion forum. 
 

Query1: Issue 1) When I add a row with parameters clicking the escape key to cancel no longer works.

We checked your shared sample and video demo, and we were able to reproduce the issue at our end in the shared sample. On further validation, the first parameter of the add record method you pass is not an object value. So, this issue occurred, and the refresh method was called twice. To avoid this problem, we recommend passing the object value. If you pass an object value to the add record method, the actionComplete method will trigger the request type "save." You use the startEdit method in the actionComplete event, with the requesttype as "save." 
 
Please refer to the below code snippet, 
 
 
 Childrowadder.ts 
 
 public onAddChild(args) { 
 
        /…… 
       
       var data={text:"",id:uuidv4(),isParent:false,}; 
        this.treegrid.addRecord(data, this.rowIndex, "Above"); 
 
    } 
 
 
App.componet.ts 
 public onActionComplete(args) { 
 
 
    if (args.requestType == 'save' && args.action == 'add') { 
       
      var dataa = this.treegrid.getCurrentViewRecords(); //get the current view data 
          var index = dataa.findIndex((rank) => (rank as Treerow).text === ""); //get the index value using taskID value 
          console.log(index); 
   
          this.treegrid.selectRow(index); 
          this.treegrid.startEdit(); 
    } 
 
 
 
 

Query2: Issue 2)  When I add a row with parameters the enter key does not work to save the row.

Issue 3) This is more of a suggestion, but when you add record, the add event does not get fired, instead the refresh event gets fired twice. it would be nice if it was consistent across calls.

We suspect that the reported issue occurred, when the first parameter of add record method is not a object value.

By default, while adding the record, in actionComplete event, trigger the args.requestType as “save”.

Please refer to the below modify sample,

 
Kindly get back to us for further assistance. 

Regards, 
Pon selva 


Marked as answer

ZA Zachary October 24, 2021 03:27 PM UTC

Hi Pon,


Thank you for the workaround. It seems that if I pass in an empty array for children:[] it still refreshes twice and this is what is triggering the behavior. I don't believe I need to  do this for the current use case and I believe the workaround will work for me.

This does not work:

//does not work
{
            text:"",
            children: [],
            isParent: false,
            id: uuidv4()
        }

works
{
            text:"",         
            isParent: false,
            id: uuidv4()
        }


PS Pon Selva Jeganathan Syncfusion Team October 25, 2021 05:25 PM UTC

Hi Zachary,

Thanks for the update. 

We checked your query by preparing sample(based on code snippet), we are able to reproduce the issue(esc and enter key is not working properly) at our end while using the addrecord method to add a row with a child. 
 
On further validation,  we have confirmed it as a bug and logged the defect report When adding a row with a child, the Esc and Enter keys are not working properly ”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our weekly release which is expected to be rolled out on 17th November 2021.   
      
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.      
      
Disclaimer: The feedback link is in review state and you can view it once it is validated 
 
Until then we value your patience 

Regards,
Pon selva 



PS Pon Selva Jeganathan Syncfusion Team November 18, 2021 02:19 PM UTC

Hi Zachary,   
   

Query: hierarchical data as a single root parent with more than 6K child

 
We have already logged in "When adding a row with a child, the Esc and Enter keys are not working properly" as a bug. On further validating, It is not feasible to implement your query. So, we suggest you use the below work around solution.  
 
Work around: 
 
You need to assign the args.requestType as beginEdit in the actionComplete event with the second time of refresh calling. 
 
Please refer to the below Code example, 
 
 
public onActionComplete(args) { 
    console.log(args.requestType); 
    if (args.requestType == 'refresh') { 
      …… 
    } 
 
    if (args.requestType === "beginEdit" || args.requestType === "add") { 
      
    } 
    if (this.secondTime) { 
 
      args.requestType = 'beginEdit'; 
 
    } 
 
 
 
Please refer to the below screenshot: 
 
While pressing the enter key: 
 
 
Please refer to the below sample, 

 

Kindly get back us if you need further assistance.

  
Regards,  
Pon selva   


Loader.
Up arrow icon