1. Home
  2. Forum
  3. React - EJ 2
  4. TabComponent - alert or console.log

TabComponent - alert or console.log

I just wonder if there is a method that triggers by clicking different tabs on TabComponent. For example: There are 4 tabs and I would like to know which tab is clicked so I would prefer to have a method like e.g. alert("Second tab is clicked") or console.log("Second tab is clicked"). I cannot find the api.

Same applies to Accordion too - let's say if there are 5 accordions, I wish to know which accordion is clicked.

I know it is simple but it is just that I cannot find the source codes on documentation.

Thanks expert.

9 Replies
DL Deepa Loganathan Syncfusion Team September 19, 2018 12:15 PM UTC

Hi Debao,  

Thanks for contacting Syncfusion support. 

You can make use of the “Selected” and “expanded” event available in Tab and Accordion items respectively, which will be triggered upon clicking the Tab or Accordion items.  
For your convenience, we have created a sample and you can find the same here. https://stackblitz.com/edit/react-9wgktr-7g5erz?file=index.js  

API links: 

Regards, 
Deepa L. 



DC DeBao Chua September 19, 2018 01:58 PM UTC

Hi Deepa Loganathan,

Wow it is exactly what I am looking for but the language is in JavaScript React. At least I can understand and amend it to Typescript but I encounter some issues. I am not sure how can I improve on it? It would be great if you could give me some advice in Typescript (tsx) that supports React so that I will understand how it works. I am new to it but I am liking this language. :)

Please refer to the link I create - https://stackblitz.com/edit/react-ts-buuejz?file=index.tsx 

I have 3 questions related to this forum:
Question 1 - can I create several files like e.g. TwitterTab.tsx, FacebookTab.tsx, WhatsAppTab.tsx and then I will call these methods into Main.tsx? Reason: Clean code. :-) Same applies to Accordion too. Refer to my ideal code below but I encounter an issue like content={ <TwitterTab />} and content={<ASPAccordion/>}

                    <TabComponent heightAdjustMode="Auto" id="defaultTab" selected={this.tabSelected}>
<TabItemsDirective>
<TabItemDirective header={{ text: "Twitter" }} content={ <TwitterTab />} /> --> it does not work??
<TabItemDirective header={{ text: "Facebook" }} content={this.tabContent2} />
<TabItemDirective header={{ text: "WhatsApp" }} content={this.tabContent3} />
</TabItemsDirective>
</TabComponent>

                    <AccordionComponent
ref={accordion => { this.accordion = accordion; }}
id="accordion"
expanded={this.expanded}
>
<AccordionItemsDirective>
<AccordionItemDirective header={"ASP.NET"} expanded={true} content={<ASPAccordion/>} /> --> it does not work??
<AccordionItemDirective header={"JavaScript"} content={this.acrdnContent2} />
<AccordionItemDirective header={"PHP"} content={this.acrdnContent3} />
</AccordionItemsDirective>
</AccordionComponent>

Question 2 - if I wish to create a dialog modal that opens tab and accordion (from Main file), can I create a modal.tsx and then I will put this class into Main.tsx too?

                <DialogComponent isModal={true} width="80%">
<Main/>
DialogComponent>

Question 3 - Do I need to unmount the components inside tab or accordion if I place dropdownlist and textfield? I just unmount tab component and accordion component that will destroy?

Thank you.

DL Deepa Loganathan Syncfusion Team September 20, 2018 12:28 PM UTC


Hi Debao, 

We understand your query for using accessing Tab content from another component and using the components in Dialog Modal and have prepared a sample based on your requirements. Please refer the below sample in Stackblitz. 


Please refer the below documents to explore more accordion and Tab components. 

API links:   

If this sample does not meet your requirements, then please get back to us with more detailed information, so that we can provide you with an appropriate solution. 

Regards, 
Deepa L. 


DC DeBao Chua September 20, 2018 02:58 PM UTC

Thanks.

PN Preethi Nesakkan Gnanadurai Syncfusion Team September 21, 2018 07:03 AM UTC

Hi Debao, 
  
Most Welcome. 
  
Please let us know if you need any further assistance. 
  
Regards, 
Preethi 


DC DeBao Chua September 21, 2018 07:09 AM UTC

Sure thanks and I am still encountering one issue - please refer to the link: https://www.syncfusion.com/forums/139897/dialog-issue-click-close-and-it-renders-multiple-div

The issue is that the fields are placed outside of the ReactFinalForm component so it gets disconnected. There will be multiple tabs that contains a single form and single submit/reset/cancel buttons.

Your advice and sample code will be appreciated. Thanks.

Refer to the sample of problem:
https://stackblitz.com/edit/react-ts-tgugkg

DL Deepa Loganathan Syncfusion Team September 22, 2018 01:50 PM UTC

Hi Matteo, 

Thanks for your update. 

No.  You can hidden visibility of HTML DOM element in all assigned tab content and no need to visible for this element in tab created event.  Only the first tab with position 0 is need to set visibility on tab created event.  Remaining tab content HTML DOM element is set visible on tab selected event.  Please find the below code. 

function tabCreated(e) { 
     document.getElementById(removeHashTag(tabObj.items[0].content)).style.visibility = "visible";   // You need to visible only the first tab content 
        } 

function tabSelected1(e) {  // Triggered every time you select the tab 
     document.getElementById(removeHashTag(this.items[e.selectedIndex].content)).style.visibility = "visible";   // Remaining tab visible on when you select the tab 
    } 



Query: “Anyway, this workaround isn't working if a user resize the window before opening the tab that contains the RTE.
In this case, the RTE is still disabled.” 

We were able to reproduce your reported issue.  This issue because of RTE height is not set properly when resize the window with hidden element.  If you wish to solve this issue, you can use the below sample level solution for solve this issue.  You can render RTE component when you click the navigate into another page button or selected event.   

We have rendered RTE component when you click the navigate into another page. 
function trainList() {  
            if (defaultRTE == undefined) { 
            defaultRTE = new ej.richtexteditor.RichTextEditor({});// Render RTE component when you click navigate into another page button 
            defaultRTE.appendTo("#defaultRTE"); 
            } 
            ControlLists[1] = { "Editor(RTE)": defaultRTE, "TrainList(GRID)": availTrainGrid } 
       } 


Or else you can render RTE component  when you select the tab using selected event. 
function tabSelected1(e) { 
document.getElementById(removeHashTag(this.items[e.selectedIndex].content)).style.visibility = "visible"; 
   if (defaultRTE == undefined) { 
             defaultRTE = new ej.richtexteditor.RichTextEditor({}); 
             defaultRTE.appendTo("#defaultRTE"); 
            } 
       } 

Now, you can refresh the RTE component when every time tab is selected using selected event.  Because, your RTE window resize problem is solved on when refresh the RTE component.  Please find the below code. 

function tabSelected1(e) { 
    if (e.selectedIndex === 1) {  // When you click first position tab 
         defaultRTE.refresh();   // You can refresh the RTE component 
            } 
        } 

Please find the below stackblitz link for your reference. 

Please also find the below video for your reference. 



Regards, 
Buvana S 



Hi DeBao, 

Thanks for your update. 

As already mentioned in the last update of forum 139897, we have rendered one or more tab inside the react-final-form and loaded form Fields into tab content using tab template.   

If you are using tab itemDirective to load the form Fields, it won’t render the fields element properly.  Because, tab itemDirective is compiled the react component element and then placed inside the tab content.  
Since, you are trying to get Fields using itemDirective, it shows console error.  Because, when compiling tab Fields required react-final-form.  So, we suggest using tab template for rendering tab content with form Fields.  Please find the below code. 

Index.tsx 
 
import { Form } from "react-final-form"; 
import Tab from "./tab"; 
 
     <Form onSubmit={onSubmit} 
              render={({ handleSubmit, reset, submitting, pristine, values })=> 
            ( 
            <form onSubmit={handleSubmit}> 
                <Tab />            // Tab component 
                          </form> 
            )} 
            /> 

Tab.tsx 
 
import { ReactTabforms } from './form'; 
 
render() { 
    return ( 
<div> 
    <TabComponent heightAdjustMode='Auto' id='defaultTab'> // Render tab 
        <div className="e-tab-header"> // Render tab header 
            <div>tab1</div> 
        </div> 
        <div className="e-content">  // Render tab content 
            <div> 
                <ReactTabforms />     // Render react form 
            </div> 
        </div> 
    </TabComponent> 
</div> 
    ); 
  } 
} 


Form.tsx 
import { Form, Field } from "react-final-form"; 
        <div> 
            <label>First Name</label> 
            <Field name="firstName"    // Specify field 
                   component="input" 
                   type="text" 
         </div> 



Regards, 
Buvana S 



DC DeBao Chua September 24, 2018 12:10 PM UTC

Hi Buvana,

Thank you for the updates.

I have tested the source codes and it looks perfect. I understand about the issue (template rendering) you explained. :)

Thank you expert.

DL Deepa Loganathan Syncfusion Team September 25, 2018 08:57 AM UTC

 Hi Matteo,    
   
We are glad to hear that your issue has been solved. Please let us know if you have any further queries.    
   
Regards,    
Deepa L.   


Loader.
Up arrow icon