How to add grid control dynamically in to the Tab control tab.

[chinthaka wimalaratna]

Hi, I have a requirement of building page with tab controller and inserting tabs dynamically using a data set. When creating the tabs I want to insert Grid control in to the each Tab I'm creating. I found the following example which I can create dynamic tabs and insert html content.  https://www.syncfusion.com/forums/116227/create-tab-dynamically  But in this example it only insert static html tags to the page. I want to insert Grid control with data in to the tab.

Thanks & Regards,

Chinthaka.

[Vignesh Kumar D R]

Hi Chinthaka, 

 

As per your requirement we have created sample, please find the sample in the below link. 

 

Sample: https://jsplayground.syncfusion.com/jef24jq4?mode=ios  

 

Regards, 

Vignesh Kumar DR 

[chinthaka wimalaratna]

Thank you Vignesh.  I have accidentally posted this question on mobile forum. Actually I want to archive this on Web Tab control ejTab. Could you please let me know this works for web java script controls as well. If its a some other way of doing it please let me know.

[Dhivyalakshmi Thirumurugan]

  

Hi Chinthaka,   

  

Thanks for the update.   

  

In the last update, we have given the sample for Tab mobile control and it doesn’t work in Tab Web control. We can add the tab dynamically by using addItem() public method of Tab Web control. And the method has the option to set the tab id for the new tab. On using that tab id, we can add the grid to the content of the newly added tab. Please find the code below code example.   

  

To add the New tab item Dynamically:   

  

<code>    

          var tabObj = $("#defaultTab").data("ejTab");   

          tabObj.addItem("#new", "New Tab", 2, "myClass", "newItem");   

</code>   

  

  

To insert the grid into the newly added tab item:   

  

$("#newItem").ejGrid({   

              dataSource: dm,   

              allowPaging:true,   

              columns: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]   

});   

  

  

In the above code, we have inserted the new tab dynamically by using addItem() method and passed “newItem” as tab id to the argument of the method. And using that tab id, we have rendered the grid and by default, it will be inserted to the tab content on matching the tab id.   

  

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

  

Sample Link: https://jsplayground.syncfusion.com/x5oycjfw   

                         

Other References:   

  

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

  

Please let us know if you need any further assistance.   

       

Regards,   

Dhivyalakshmi.