Grid inside Tab

[Dave Nixon]

Can you add a Grid inside a Tab?

[Deepa Loganathan]

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.  

http://www.syncfusion.com/downloads/support/forum/140578/7z/mvcTabEJ2-2039932947  

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

Regards,  

Deepa L. 

[Dave Nixon]

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]

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 

.  

 

Index.cshtml 

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

       @Html.EJS().Grid("RemoteData").DataSource(..).Render()  

      </div> 

     

  

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.  

 

 

https://ej2.syncfusion.com/documentation/tab/api-tab.html?lang=typescript#selecting  

 

 

Please let us know if you need any further assistance on this. 

 

 

Regards,  

 

Deepa L.