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

How can I remove All tabs and add new ones dynamically

Hello,

I'm trying to remove all ejTabs and add new ones but the remove function seems not to remove everything

var tabObj = $("#defaultTab").data("ejTab");
            $( "#createzone" ).click(function() {
               
                 
                // $("#defaultTab").ejTab("addItem","#new","New Item");
                 var numberOfTabs =  $("#defaultTab").ejTab("getItemsCount");
                 
                 for( var i = 0; i < numberOfTabs; i++ ){
                  tabObj.removeItem(i);
                  }
   
                 numberOfTabs =  $("#defaultTab").ejTab("getItemsCount");
   
                     zones.forEach(function(element, index) {
               
                        console.log(element.zoneName+" number of nodes "+element.nodes.length+" color: "+element.zoneColor+" "+index);
                        tabObj.addItem("#"+element.zoneName,element.zoneName);
                   
                    });
                   
               
                });

7 Replies

DT Dhivyalakshmi Thirumurugan Syncfusion Team August 25, 2016 08:48 AM UTC

Hi Gaetan, 

Thanks for contacting Syncfusion support. 

In Tab control, the behavior of the removeItem() method is to remove the tab items based on the index. So to remove the all tabs we suggests you the below workaround. Please find the code below. 

  $("#btn").click(function () { 
            var tabObj = $("#defaultTab").data("ejTab"); 
            for (var i = $("#defaultTab .e-item").length; i >= 0 ; i--)
                tabObj.removeItem(i); 
            } 
            tabObj.addItem("#new", "New Item", 3, "myClass", "newItem"); 
    }); 

Using the above code, we can remove the all tab items and we can add the new tab item using addItem() method. 

We have prepared the sample based on your requirement, please find the sample link below. 


Please let us know if you have any queries. 

Regards, 
Dhivyalakshmi. 
 



GT Gaetan Temate August 25, 2016 09:08 AM UTC

Dhivyalakshm,
thank you very much for your answer, i have another small question, how can i change the default blue theme of the tabs, that is i want to set my own colors dynamically once the tabs are created

Regards,
Gaetan


DT Dhivyalakshmi Thirumurugan Syncfusion Team August 26, 2016 05:35 AM UTC

Hi Gaetan, 

Thanks for the update. 

Please check the following ways to customize the Tab control. 

1) Using Theme studio 

You can change the style of the control using Syncfusion theme studio. Please check the below link. 


2) Using cssClass 

Also you can override the tab control CSS using cssClass property. Please find the code below. 

$(function () { 
            $("#defaultTab").ejTab({ cssClass: "custom"}); 
        }); 


.custom.e-tab .e-header.e-addborderbottom .e-active { 
  border-top: 3px solid Red; 
.custom.e-tab.e-js .e-header > .e-item:hover { 
  background-color: salmon; 

Using the above code, we have overridden the hover color and the active background color of the tab.  

Also we have prepared the sample for your reference. Please find the sample link below. 


Other References: 

Please let us know if you need any further assistance. 

Regards, 
Dhivyalakshmi. 
 



GT Gaetan Temate August 26, 2016 12:04 PM UTC

Hi
thank you, bu i need a diffrent theme per tabs for one ejTab. that si a new addes item should have diffrent theme from the others, i tried to do something like this but is not really clean

tabObj.addItem("#"+element.zoneName,element.zoneName);
                       
                        //setTimeout(function(){
                       
                         $("#"+element.zoneName).ejTreeGrid({
                            dataSource: element.data,
                            childMapping: "subtasks",
                            treeColumnIndex: 0,
                            isResponsive:true,
                            allowColumnResize:true,
                            editSettings: { allowEditing: true, editMode: "cellEditing" },
                            columns: [
                                ...
                            ]
                        });
                       
                        //}, 1000);
                       
                        $("#"+element.zoneName).css(
                        "border","solid 3px "+element.zoneColor
                       
                        );
                        $("[rel='nofollow' href='#"+element.zoneName+"']").css(
                        "border-left","solid 3px "+element.zoneColor
                       
                        );
                   


DT Dhivyalakshmi Thirumurugan Syncfusion Team August 29, 2016 12:44 PM UTC

Hi Gaetan, 

Thanks for the update. 

We can customize the Tab items after adding the new Tab using addItem() method. In addItem() method we have parameter named cssClass and using that class we can customize the tab item. 

       tabObj.addItem("#new", "New Item", 3, "myClass", "newItem"); 
       $(".myClass").closest("li").css({"border-top": "2px solid red"}); 

In the above code, we have passed myClass as a parameter to the addItem method and found out the corresponding li element using jQuery selector and added the border color to the tab item. 
 
We are supposed to provide the above code because for changing the color of the Tab we need to customize the li element but the cssClass was added to the span element. So we are suggesting the above code to achieve your requirement. 
 
We have prepared the sample as per your requirement. Please find the sample link below. 
 

References:  


Please let us know if you have any queries. 

Regards, 
Dhivyalakshmi. 



GT Gaetan Temate August 30, 2016 12:28 PM UTC

Hello Dhivyalakshmi,
thank you for all your answers,

i have to put TreeGrids in diffents Tabs but from de second one the heurders are not visible


my sample code

          <div id="tab">
                        <ul>
                            <li><a rel='nofollow' href="#TreeGridContainer">TreeGridContainer</a></li>
                            <li><a rel='nofollow' href="#TreeGridContainer2">TreeGridContainer2</a></li>
                        </ul>
                       
                <div id="TreeGridContainer" style="height:350px;"></div>
                <div id="TreeGridContainer2" style="height:350px;"></div>
                       
            </div>


<script>
 $("#tab").ejTab({ showCloseButton: true,cssClass: "custom" });
     

            $("#TreeGridContainer").ejTreeGrid({
                dataSource: dataManager,
                childMapping: "subtasks",
                treeColumnIndex: 0,
                isResponsive:true,
                editSettings: { allowEditing: true, editMode: "cellEditing" },
                columns: [
                    { field: "Accumulated_MW", headerText: "Accumulated/MW", editType: "numericedit", width: "60" },
                    { field: "Price_EUR", headerText: "Price/EUR", editType: "stringedit" },
                    { field: "Price_SEK", headerText: "Price/SEK", editType: "stringedit" },
                    { field: "Amount_MW", headerText: "Amount/MW", editType: "numericedit" },
                    { field: "ELSPOT_Area", headerText: "ELSPOT Area", editType: "stringedit" },
                    { field: "PowerPlant", headerText: "Power Plant", editType: "stringedit" }
                ]
            });
           
           
           
            $("#TreeGridContainer2").ejTreeGrid({
                dataSource: dataManager,
                childMapping: "subtasks",
                treeColumnIndex: 0,
                isResponsive:true,
                editSettings: { allowEditing: true, editMode: "cellEditing" },
                columns: [
                    { field: "Accumulated_MW", headerText: "Accumulated/MW", editType: "numericedit", width: "60" },
                    { field: "Price_EUR", headerText: "Price/EUR", editType: "stringedit" },
                    { field: "Price_SEK", headerText: "Price/SEK", editType: "stringedit" },
                    { field: "Amount_MW", headerText: "Amount/MW", editType: "numericedit" },
                    { field: "ELSPOT_Area", headerText: "ELSPOT Area", editType: "stringedit" },
                    { field: "PowerPlant", headerText: "Power Plant", editType: "stringedit" }
                ]
            })

</script>


DT Dhivyalakshmi Thirumurugan Syncfusion Team August 31, 2016 11:47 AM UTC

Hi Gaetan,  
 
Thanks for the update. 
 
While navigating between different TreeGrid in ejTab we need to set the height and width for the inactive TreeGrid to update its size. We have prepared the work around and updated the TreeGrid size using the ejTab client side event “itemActive” which will be triggered while the tab item gets active.   
 
Please find the code example below:   
 
    <div id="tab">  
        <ul>  
            <li><a rel='nofollow' href="#Container">TreeGridContainer</a></li>  
            <li><a rel='nofollow' href="#Container2">TreeGridContainer2</a></li>  
        </ul>  
        <div id="Container">  
            <div id="TreeGridContainer" style="height:450px;"></div>  
        </div>  
        <div id="Container2">  
            <div id="TreeGridContainer2" style="height:450px;"></div>  
        </div>  
    </div>  
    <script type="text/javascript">  
        $(function () {  
            $("#tab").ejTab({ showCloseButton: true, cssClass: "custom", itemActive:"onClientActive" });  
            $("#TreeGridContainer").ejTreeGrid({  
                 //  
                dataSource: dataManger1,  
              });  
            $("#TreeGridContainer2").ejTreeGrid({  
                dataSource: dataManger2,  
                      //                  
            })  
        });  
        function onClientActive(args) {  
            //To update the size of the hidden TreeGrid  
            if (args.activeIndex == 1) {  
                var treeObj = $("#TreeGridContainer2").data("ejTreeGrid"),  
                sizeSetting = { height: "450px", width: "100%" };  
                treeObj.setModel({ "sizeSettings": sizeSetting });  
            }  
        }  
    </script>  
 
We have prepared the sample for your reference .Please find the sample from below location   
 
   
Please let us know if you need any further assistance. 

Regards, 
 
Dhivyalakshmi. 


Loader.
Up arrow icon