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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





125095 Jul 21,2016 04:04 AM UTC Jul 26,2016 06:13 AM UTC JavaScript 3
Tags: ejTab
chinthaka wimalaratna
Asked On July 21, 2016 04:04 AM UTC

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,

Vignesh Kumar D R [Syncfusion]
Replied On 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 

chinthaka wimalaratna
Replied On 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.

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On 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.   


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon