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

Double Click not working on third level


I have the need to use three levels grids. Everything is working fine except no events are registered for the grid of the third level. 

What am I doing wrong?

I have attached the source code.

The behavior can be tested at http://rechnungskontrolle.azurewebsites.net/fetch-data/2. The double click on the first row work. After expanding the double click on third row of the child grid works. After expanding the next level the double click does not work.

Any ideas why not?



Attachment: fetchdata_a9519355.zip

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 24, 2017 12:22 PM UTC

Hi Robert,  
We have checked the given Hosted site. We could see the third level Grid is not assigned a function for recordDoubleClick. Refer to the following screenshot taken from the hosted site.  
So, we suggested to ensure this at your end whether the recordDoubleClick is assigned a valid function.  
Seeni Sakthi Kumar S. 

RB Robert Bakos July 24, 2017 05:50 PM UTC

Thank you for your reply! 

I believe the scope of the functions within type script is not working correctly. The assignment of the event handler works, if I do the following:

            recordDoubleClick: onInvoiceRecordDoubleClick// this.onInvoiceRecordDoubleClick
        function onInvoiceRecordDoubleClick(e) {

So there is a differnce between using this.onInvoiceRecordDoubleClick which is defined within the class and using the function, which is defined within the scope of onInvoiceDetailsDataBound.

I don't understand why the code for the second level is working but not for the third.



TS Thavasianand Sankaranarayanan Syncfusion Team July 27, 2017 03:46 AM UTC

Hi Robert, 

Sorry for the inconvenience caused. 

We have analyzed your query and we are able to reproduce the reported issue from our end. By default if we pass the event as “this.name” then “this” have added context of that Grid models with in. For this type of hierarchical Grid, we used to define using the arrow function defining. 

Refer the below code example. 

export class AppComponent { 
       detailsDataBound(e: any) { 
              dataSource: data, 
              recordDoubleClick: (e: any) => this.secondleveldbl(e), 
              detailsDataBound: (e: any) => this.databundeventss(e), 
              detailsTemplate : "#Gridcontents", 
     databundeventss(e: any) { 
             allowPaging: true, 
              dataSource: ejmpdata, 
              recordDoubleClick: (e: any) =>  this.thirdleveldbl(e), 
                 secondleveldbl(e:any) { 

We have prepared a sample and it can be downloadable from the below location. 

Refer the general solution link 

Thavasianand S. 

RB Robert Bakos July 27, 2017 03:56 PM UTC

Thank you very, much!

Again great support!!!

Maybe you could update the example at the Angular section so other developers won't run into the same issue?

You can close this issue.



SA Saravanan Arunachalam Syncfusion Team July 28, 2017 11:11 AM UTC

Hi Robert,  
Thanks for your update.            
We are happy that the provided information helped you. 
Saravanan A. 

Live Chat Icon For mobile
Up arrow icon