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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tabs onClick and/or onSelected events - How to

Thread ID:

Created:

Updated:

Platform:

Replies:

142447 Feb 5,2019 02:07 AM UTC Feb 12,2019 09:31 AM UTC JavaScript - EJ 2 5
loading
Tags: Tab
Travis
Asked On February 5, 2019 02:07 AM UTC

I have looked at the content of the link below and have searched on how to add events to the tabs, but I am not finding any real good javascript examples.  My goal is to load specific content at the time a Tab is clicked/selected.  How to I setup, fire, and capture the "selected" event in javascript?

     selected
     EmitType<SelectEventArgs>
     The event will be fired after the item gets selected.

See also my last question for a reference:

Deepa Loganathan [Syncfusion]
Replied On February 5, 2019 06:52 AM UTC

Hi Travis,  

We understood your requirement to load the Tab content in the Selected event of Tab. 

To explain better, the content of Tabs, by default will be loaded on demand i.e. once the Tab item is selected either by User Interaction or programmatically via select method.  

So, you can load the Tab content in Tab selection by mapping the selector of the DOM element in the content property as given in the below code.  

[HTML] 
 
<div class="control-section"> 
 
    <div class="content-wrapper"> 
 
        <div id="Tab"></div> 
 
       <button id="btn">Add Tab</button> 
 
    </div> 
 
</div> 
 
<div class="target" style="display: none">  
 
      dynamically added content goes here... 
 
</div> 
 

[JS] 
   
let tabObj = new ej.navigations.Tab({ 
    items: [ 
        { 
            header: { 'text': 'Twitter' }, 
            content: '<span>Twitter</span></br><div><input id="intext" class="e-input"></div>' 
        }, 
       { 
           header: { 'text': 'Facebook' }, 
           content: 'Facebook ' 
       },  
       {header:{"text":"dynamic"}, 
       content: "#target"    // ID of content to be loaded upon Tab selection 
       } 
    ],  
 
    selected: this.addTab 
}); 
 
tabObj.appendTo('#Tab'); 
 


For your convenience, we have prepared a live sample based on your requirement available in the below link. 


Here the Tab header will be rendered, and the Tab content will be loaded once you select the Tab item “dynamic”. 

You can also add a new Tab item dynamically by using addTab method. In the above example, we have showcased this by adding an item in the click event of Button.  

Please check and get back to us in case of any further queries.  

Regards,  
Deepa L. 


Travis
Replied On February 7, 2019 02:38 AM UTC

Actually, I need to build the content of each tab in javascript.  Its very dynamic.  I need to add my content to the item array in javascript, then display.  I am trying to find a way to have an onClick event or use the "selected" event directly when user clicks a tab.  

Here is what I need todo in the javascript where "headerText " and "contentHtml " are dynamically built.

var item4 = [{ header: { text: headerText }, content: contentHtml }];
tabObj.addTab(item4, 2);

Then on click, javascript needs todo work, not just display something.  Does that make sense?

Update:
I looks like I may not be able to use the tab this way.

Deepa Loganathan [Syncfusion]
Replied On February 7, 2019 12:12 PM UTC

Hi Travis,   
 
Sorry for the inconvenience.  
 
From the details provided in your last update, we understood that you wish to add Tab items dynamically in the selected event of Tab.  
 
To achieve this, you need to bind a call back function for Selected event of Tab as given below.  
 
ej.base.enableRipple(true); 
 
    var tabObj = new ej.navigations.Tab({ 
    items: [ 
        { 
            header: { 'text': 'Twitter' }, 
            content: '<span>Twitter</span></br><div><input id="intext" class="e-input"></div>' 
        }, 
       { 
           header: { 'text': 'Facebook' }, 
           content: 'Facebook ' 
       },  
       {header:{"text":"dynamic"}, 
       content: "#target" 
       } 
    ],  
 
    selected: AddTab // bind selected event of Tab 
}); 
 
tabObj.appendTo('#Tab'); 
 
function AddTab(args){ 
   if(args.selectedIndex == 2){ 
  let contentHtml = "Add content dynamically" 
 var item3 = [{ header: { text: 'Snapchat' }, content: contentHtml }]; 
tabObj.addTab(item3, 3); 
 
} 
} 
 
 
 
Please find the live sample to dynmically add Tab items in the selected event of tab in the link provided below.  
 
 
We suggest you go through our below help pages to explore more about the configuration and usage of Tab components. 
 
 
 
 
If we misunderstood your requirement, please get back to us with the modified sample to replicate your scenario. So that we can analyze further to provide you a prompt response that suits your application needs. 
 
Regards,  
Deepa L. 


Travis
Replied On February 12, 2019 01:29 AM UTC

I have another question.  Once I have that tabs built, I want to change the tab selected based on some other parameters. For example, I select tab 2 and based on user input on that form, I want to go back to tab 0. 

The documentation is not very clear how todo this.
https://ej2.syncfusion.com/javascript/documentation/api/tab/?_ga=2.8236402.1102953138.1549128304-531474152.1549128304#select 

Thanks.

Silambarasan I [Syncfusion]
Replied On February 12, 2019 09:31 AM UTC

Hi Travis, 
 
Thanks for your update. 
 
We have looked into your reported query and your requirement can be achievable by using available ‘selectedItem’ property or ‘select’ client-side method in Tab. Based on your user input, you can pass the index value to select the tab as like in the below code example. 
 
 
function yourfunction() { 
 
    if // based on your condition          
 
        tabObj.select(0); // Using select method to select the Tab by passing tab index. 
 
        //or  
 
        tabObj.selectedItem = 1; // Using selectedItem property to select Tab. 
 
} 
 
 
 
In the below sample, we have selected the first tab (index – 0) while selecting third tab using select method and selected the second tab while selecting the fourth tab using selectedItem property. 
 
Could you please check the above sample and get back to us if you require further assistance on this? 
 
Regards, 
Silambarasan 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon