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 to add grid control dynamically in to the Tab control tab.

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,

3 Replies

VK Vignesh Kumar D R Syncfusion Team July 22, 2016 09:09 AM UTC

Hi Chinthaka, 
As per your requirement we have created sample, please find the sample in the below link. 
Vignesh Kumar DR 

CW chinthaka wimalaratna July 26, 2016 12:16 AM UTC

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.

DT Dhivyalakshmi Thirumurugan Syncfusion Team July 26, 2016 06:13 AM UTC

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:   
          var tabObj = $("#defaultTab").data("ejTab");   
          tabObj.addItem("#new", "New Tab", 2, "myClass", "newItem");   
To insert the grid into the newly added tab item:   
              dataSource: dm,   
              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.   
Other References:   
Please let us know if you need any further assistance.   

Live Chat Icon For mobile
Up arrow icon