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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to avoid loading data inside a tab

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 08:53 AM UTC

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.

Warning Icon 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.Close Icon

;