Grid with waiting pop up inside tab

[Neider]

Hi, I have some grids inside tabs each one, those are loaded when I click the specific tab, the problem is that when I change the tab the waiting popup of the grid is showing in the corner of the screen, top left of the screen. I want to show this waiting popup inside the tab, in the grid, not in the corner.

Thanks.

 

[Ajith Govarthan]

Hi Neider, 

Greetings from Syncfusion support. 

Based on the attached screenshot we have prepared sample but we are un able to reproduce the reported issue at our end. For your convenience we have attached the sample so please refer the sample for your reference. 

Code Snippet:  

Index.cshtml 

<ejs-tab id="ej2Tab"> 

<e-tab-tabitems> 

<e-tab-tabitem> 

<e-content-template> 

<div> 

<div class="e-tab-header"> 

<div>Grid</div> 

<div>Grid1</div> 

<div>DatePicker</div> 

</div> 

<div class="e-content"> 

<div> 

<ejs-grid id="Grid"> 

<e-data-manager url="http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/?$top=7" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager> 

<e-grid-columns> 

<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column> 

<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column> 

<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 

<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column> 

</e-grid-columns> 

</ejs-grid> 

</div> 

<div> 

<div> 

<ejs-grid id="ej2grid" dataSource="ViewBag.DataSource" height="400px" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

<e-grid-pagesettings pageCount="5 "></e-grid-pagesettings> 

<e-grid-columns> 

<e-grid-column field="OrderID" headerText="Product ID" textAlign="Right" width="120"></e-grid-column> 

<e-grid-column field="CustomerID" headerText="Product Name" width="150"></e-grid-column> 

<e-grid-column field="EmployeeID" headerText="Supplier ID" textAlign="Right" width="130"></e-grid-column> 

<e-grid-column field="ShipCity" headerText="QuantityPerUnit" format="C2" textAlign="Right" width="120"></e-grid-column> 

<e-grid-column field="Discontinued" headerText="Discontinued" width="140" textAlign="Center" type="boolean" displayAsCheckBox="true"></e-grid-column> 

</e-grid-columns> 

</ejs-grid> 

</div> 

</div> 

<div> 

<ejs-datepicker id="ej2datapicker"></ejs-datepicker> 

</div> 

</div> 

</div> 

</e-content-template> 

</e-tab-tabitem> 

</e-tab-tabitems> 

</ejs-tab> 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tab_component_-_Core-1744533346.zip  

If the above sample doesn’t meet your requirement then please share the below details. 

1. Share Syncfusion package version.
2. Share Complete grid code sample.

Regards, 

Ajith G.