How to avoid loading data inside a tab

[dsapo]

Hi Support:

I have a view that has the ejTab with several tab items.  Each tab item has a ejGrid inside that loads data from a database.

We need to know if its possible to render only the grid located in the active tab item to avoid processing the other non active grids.

So every time a user selects a tab, the idea is to process the datasource and grid events of the active grid only.

How we can achieve this.

Thanks in advanced

David

 

[Keerthana Rajendran]

Hi David,   

   

Thank you for contacting Syncfusion support, 

 

We suggest to use itemActive event of Tab, to load Grid as tab item only when that tab item is active. Please refer to the given code   

   

  <ej-tab id="tabSample" item-active="TabitemActive">   

        <e-tab-items>   

…………………   

        </e-tab-items>   

    </ej-tab>   

   

<script>   

  var flag,flag1;   

    function TabitemActive(e) {   

   

        

        if (e.model.selectedItemIndex == 1 && ej.isNullOrUndefined(flag)) {   

            $.ajax({   

                url: '/Home/Contact',   

                type: 'POST'   

   

            }).done(function (result) {   

                $("#Grid2").html(result);   

                  

            })   

            flag = true;   

        }   

        if (e.model.selectedItemIndex == 2 && ej.isNullOrUndefined(flag1)) {   

            $.ajax({   

                url: '/Home/About',   

                type: 'POST'   

   

            }).done(function (result) {   

                $("#Grid3").html(result);   

                   

   

            })   

            flag1 = true;   

   

        }   

    }</script>   

   

  

   

   

We have prepared a sample based on your requirement. Please refer to the given link   

   

Sample: http://www.syncfusion.com/downloads/support/forum/131807/ze/Tab-381147517.zip   

   

   

   

   

Regards,   

Keerthana.