How to delay loading or rendering of grid until wraping tab is openned?

[Andrew]

Hello,

I currently have 3 tabs, each containing a Grid. How can I delay the rendering of the grid or loading of the data until the tab is opened?

Thank you!

[Balaji Sekar]

Hi Andrew, 

Greetings from the Syncfusion support. 

Based on your query you need to delay loading of data to Grid component so, we suggest you to use selected event of the Tab component. 

Please refer the below code example for more information. 

@section ControlsSection{ 

    <div id="TabContainer"> 

        <div class="col-lg-4" style="margin-top: 10px;"> 

            <div class='property-panel-header'>List of Components</div> 

  

        <div class="col-lg-8 content-wrapper control-section"> 

            <ejs-tab id="ej2Tab" height="auto"   selected="selectedTab"   

                <e-tab-tabitems> 

                    <e-tab-tabitem header="ViewBag.headerTextOne" content="#DataGrid1"></e-tab-tabitem> 

                    <e-tab-tabitem header="ViewBag.headerTextTwo" content="# DataGrid2"></e-tab-tabitem>  

                </e-tab-tabitems> 

            </ejs-tab> 

            <div class="content"> 

                <div style="display: none" id="grid1"> 

                    <ejs-grid id="DataGrid1" dataSource="ViewBag.gridData"> 

                        <e-grid-columns> 

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

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

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

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

                        </e-grid-columns> 

                    </ejs-grid> 

                </div> 

                <div style="display: none" id="chart2"> 

                     <ejs-grid id="DataGrid2"  > 

                        <e-grid-columns> 

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

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

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

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

                        </e-grid-columns> 

                    </ejs-grid> 

                </div>  

            </div> 

        </div> 

    </div> 

 

function selectedTab(e){ 

if(if(e.selectedIndex == 1){ 

var grid = document.getElementById(“DataGrid2”).ej2_instances[0]; 

grid.dataSource = @Html.Raw(JsonConvert.SerializeObject(ViewBag.datasource)); // You bind grid dataSource while tab click if you want delay you can use setTimeout function here 

} 

} 

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

Regards, 

Balaji Sekar. 

[Andrew]

Hi Balaji,

Sorry for the late reply. Things got busy at work. 

Got this to work beautifully with boostrap tabs.

Thank you!

[Pavithra Subramaniyam]

Hi Andrew, 

It is great to hear that given solution helped you! 

Please get back to us if you need further assistance. 

Regards, 

Pavithra S