Double Click not working on third level

[Robert Bakos]

Hello,

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?

Cheers,

Robert

Attachment: fetchdata_a9519355.zip

[Seeni Sakthi Kumar Seeni Raj]

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.  

 

Regards,  

Seeni Sakthi Kumar S. 

[Robert Bakos]

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) {

            alert(e.rowData.number);

        };

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.

Cheers,

Robert

[Thavasianand Sankaranarayanan]

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) { 

 

         ------------ 

 

         .detailsElement.find("#detailGrid").ejGrid({ 

              dataSource: data, 

              recordDoubleClick: (e: any) => this.secondleveldbl(e), 

              detailsDataBound: (e: any) => this.databundeventss(e), 

              detailsTemplate : "#Gridcontents", 

               

 

             }); 

 

             e.detailsElement.find(".tabcontrol").ejTab(); 

           }; 

     databundeventss(e: any) { 

                  

              -------- 

 

         e.detailsElement.find("#gridinsideother").ejGrid({ 

             allowPaging: true, 

              dataSource: ejmpdata, 

               

              ----------- 

               

              recordDoubleClick: (e: any) =>  this.thirdleveldbl(e), 

 

               

                 }; 

 

                  

                 secondleveldbl(e:any) { 

                     alert("HiSecond"); 

                 }; 

                 thirdleveldbl(e:any){ 

                     alert("HiThird"); 

                 }; 

  

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

Sample: http://www.syncfusion.com/downloads/support/forum/131658/ze/ejGrid_Vpaging-1089915269.zip 

Refer the general solution link 

Link: https://stackoverflow.com/questions/34274520/whats-the-meaning-of-in-typescript-fat-arrow 

Regards, 

Thavasianand S. 

[Robert Bakos]

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.

Cheers,

Robert

[Saravanan Arunachalam]

Hi Robert,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.