We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to avoid loading data inside a tab

Thread ID:

Created:

Updated:

Platform:

Replies:

131807 Jul 27,2017 07:45 PM Jul 28,2017 04:53 AM ASP.NET Core 1
loading
Tags: Tab
dsapo
Asked On July 27, 2017 07:45 PM

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 [Syncfusion]
Replied On July 28, 2017 04:53 AM

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   
   
   
   
   
   
Regards,   
Keerthana.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;