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

Grid inside Tab

Thread ID:





140578 Oct 26,2018 03:24 AM UTC Oct 29,2018 11:56 AM UTC ASP.NET MVC - EJ 2 3
Tags: Tab
Dave Nixon
Asked On October 26, 2018 03:24 AM UTC

Can you add a Grid inside a Tab?

Deepa Loganathan [Syncfusion]
Replied On October 26, 2018 11:18 AM UTC

Hi Dave,  
Thanks for contacting Syncfusion support.  
Yes, you can add Grid control as a content of Tab as given in the below code.  
ViewBag.content1 = "#RemoteData"; // Set the content of Tab as Grid ID in indexpage 
            ViewBag.content2 = "Content 2"; 
            ViewBag.content3 = "Content 3"; 
            ViewBag.content4 = "Content 4"; 
            List<TabTabItem> headerItems = new List<TabTabItem>(); 
            headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Grid"}, Content = ViewBag.content1 }); 
            headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header2" }, Content = ViewBag.content2}); 
            headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header3" }, Content = ViewBag.content3}); 
            headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header4" }, Content = ViewBag.content4 }); 
            ViewBag.headeritems = headerItems; 

We have prepared a sample based on your requirement and is available for download in the following link.  

Please check and get back to us if you need any further assistance.  

Deepa L. 

Dave Nixon
Replied On October 27, 2018 03:18 AM UTC

If you move to the second tab it shows until you select the second tab and move off.

public ActionResult Index()
    ViewBag.content1 = "Content 1";
    ViewBag.content2 = "#RemoteData";
    ViewBag.content3 = "Content 3";
    ViewBag.content4 = "Content 4";
    List<TabTabItem> headerItems = new List<TabTabItem>();
    headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header1" }, Content = ViewBag.content1 });
    headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Grid" }, Content = ViewBag.content2 });
    headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header3" }, Content = ViewBag.content3 });
    headerItems.Add(new TabTabItem { Header = new TabHeader { Text = "Header4" }, Content = ViewBag.content4 });
    ViewBag.headeritems = headerItems;
    return View();

Deepa Loganathan [Syncfusion]
Replied On October 29, 2018 11:56 AM UTC

Hi Dave, 
Thanks for the update.  
We have analyzed the reported issue and we would like to let you know that this is the default behavior of Tab component. So, if the content is passed as ID to the Tab item, it will be initially available in the view page (i.e. the HTML) and will be removed from the body element only while selecting the respective Tab item. 
So, to resolve this issue, you would need to set the visibility of targeted content element as hidden in the view page as given below 


   <div id="griddata" style="display:none">   // set display as none 

In addition to this, you could add items dynamically to the tab by using the addTab method in the selecting event of Tab component. This way you could prevent the content from being initially displayed in the view page. Please refer our below help page to know more about the options available in Tab.  
Please let us know if you need any further assistance on this. 
Deepa L. 


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

This page will automatically be redirected to the 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