Grid within Tooltip loses selection context when called 2nd time.

[Laurens Albers]

  

Hi,

There is a issue when opening a tooltip a second time when you're trying to get the new set of selected values from the grid.

For example: I open the tooltip with a grid(see code) and based upon the selection in the grid I return the selected values and close the tooltip. Everything works fine up to this point.

But when opening it a second time and selecting a value the selection is always empty. You can see it being triggered using the rowSelectedEvent, the array is always -> [].

Example:

using the following:

  @ViewChild('grid') grid: Grid;

  @ViewChild('tool') tool: TooltipComponent;

Any idea why? I also get the syncfusion error of "getrows" sometimes when "getting" the values a second time.

[Thiyagu Subramani]

Hi Laurens, 

Thanks for contacting Syncfusion. 

We have validated and prepared sample as per your requirement but unfortunately we couldn’t reproduced at our end.  Please refer the below code and sample link. 

Here we have rendered grid with rowSelected event inside tooltip template. 

[app.component.html] 

<ejs-tooltip  position='RightCenter' opensOn='Click' style="display:block;position:absolute;"> 

            <button ejs-button >Show Tooltip</button> 

            <ng-template #content > 

             <ejs -grid #grid [dataSource]='data' [allowSelection]='true' [selectionSettings]='selectOptions' (rowSelected)='selected($event)' > 

        <e-columns> 

. . . . . .  

        </e-columns> 

    </ejs-grid> 

            </ng-template> 

        </ejs-tooltip> 

[app.component.ts] 

selected(args){ 

     var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

     var record = gridObj.getSelectedRecords(); 

     console.log(record); 

   } 

Sample link : https://stackblitz.com/edit/angular-mpmb18-efbus1?file=app.component.ts 

Still facing the issue, please share below details. 

              1. Reproduce the issue in above sample and revert to us. 

              2.  Share video demonstration of you issue. 

  

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

Regards, 

Thiyagu S 

[Laurens Albers]

Here you go, you were close. You missed a "closing button" from my image example code.

https://stackblitz.com/edit/angular-mpmb18-hchefo?file=app.component.html

Use case: 

User selects one or more rows and passes that when pressing the button on the bottom.

Pressing the button sets the selection at the designated location AND closes the tooltip.

[Laurens Albers]

Found the solution!

It seems that the following does not work:

     var gridObj = this.grid.getSelectedRecords();

but based on your  example to call the element does work fixes the issue:

var gridObj = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

     var record = gridObj.getSelectedRecords(); 

Calling the class based on the elements name works fine, but calling the component through the ViewChild does not.

I'm guessing you should follow up the issue, but in my case it is fixed.

Thank you for your input!

[Thiyagu Subramani]

Hi Laurens 

We glad that your issue has been fixed. 

Query : Calling the component through the ViewChild does not work. 

 

We have consider this a bug from our end. We will include the fix for this bug in our weekly patch release which is expected to be rolled out in the month of 1^st April 2020. 

Track the below feedback for bug status.  

Feedback link:  https://www.syncfusion.com/feedback/12795/ 

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

Regards, 

Thiyagu S.