How can I remove All tabs and add new ones dynamically

[Gaetan Temate]

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);
                   
                    });
                   
               
                });

[Dhivyalakshmi Thirumurugan]

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. 

Sample Link: http://jsplayground.syncfusion.com/025f1eev 

Please let us know if you have any queries. 

Regards, 

Dhivyalakshmi. 

 

[Gaetan Temate]

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

[Dhivyalakshmi Thirumurugan]

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. 

UG Reference: http://help.syncfusion.com/js/theme-studio 

Demo Link: http://js.syncfusion.com/themestudio/  

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. 

Sample Link: http://jsplayground.syncfusion.com/cgzt1vzm 

Other References: 

UG Link: https://help.syncfusion.com/js/tab/appearance-and-styling#custom-styles 

Please let us know if you need any further assistance. 

Regards, 

Dhivyalakshmi. 

 

[Gaetan Temate]

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
                       
                        );
                   

[Dhivyalakshmi Thirumurugan]

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. 

 

Sample Link: http://jsplayground.syncfusion.com/r4if2ncb 

References:  

API Link: https://help.syncfusion.com/js/api/ejtab#methods:additem 

Please let us know if you have any queries. 

Regards, 

Dhivyalakshmi. 

[Gaetan Temate]

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>

[Dhivyalakshmi Thirumurugan]

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   

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/tabtreegridsample-1195955735    

   

Please let us know if you need any further assistance. 

Regards,  

Dhivyalakshmi.