Tabs onClick and/or onSelected events - How to

[Travis]

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?

https://ej2.syncfusion.com/javascript/documentation/api/tab/#addtab

     selected

     EmitType<SelectEventArgs>

     The event will be fired after the item gets selected.

See also my last question for a reference:

https://www.syncfusion.com/forums/142422/how-to-dynamically-add-remove-tabs 

[Deepa Loganathan]

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. 

https://stackblitz.com/edit/lcb5rz-ivpuwc  

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]

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]

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.  

 

https://stackblitz.com/edit/lcb5rz-ivpuwc?file=index.js  

 

We suggest you go through our below help pages to explore more about the configuration and usage of Tab components. 

 

API: https://ej2.syncfusion.com/documentation/api/tab  

 

How to: https://ej2.syncfusion.com/documentation/tab/how-to/load-content-through-post/?no-cache=1  

 

Demo: https://ej2.syncfusion.com/demos/#/material/tab/wizard.html  

 

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]

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]

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. 

https://stackblitz.com/edit/lcb5rz-muxeun?file=index.js 

 

Could you please check the above sample and get back to us if you require further assistance on this? 

 

Regards, 

Silambarasan