Grid inside a Tab

[nimue]

Hi,

I have two grids (which use the Url Adapter to connect to the DB, I attach their code) that I need to insert into a tab object but I do not understand how to do it.

Can you help me?

Thanks in advance for the help.

Attachment: MyCode_950dc5bb.zip

[Pavithra Subramaniyam]

Hi Inzitari, 

Thanks for contacting Syncfusion Support. 

We have checked your query and you can achieve your requirement by using ‘content’ property of the Essential JavaScript 2 Tab component. We have prepared  simple sample based on your query in which we insert the Essential JavaScript 2 Grid component inside the Tab component. Please refer to the below code example and Sample link. 

[index.chtml] 

<div class="e-sample "> 

        @Html.EJS().Tab("ej2Tab").Items(new List<TabTabItem>{ 

          new TabTabItem { Header = new TabHeader { Text = "Grid_1" }, Content = "#Grid1" }, 

          new TabTabItem { Header = new TabHeader { Text = "Grid_2" }, Content = "#Grid2" } 

        }).Render() 

    </div> 

    <div id="Grid1" style="display: none"> 

        @Html.EJS().Grid("Gridone").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 

                { 

                    col.Field("OrderID").HeaderText("OrderID").Width("30%").Add(); 

                    .  .  . 

 

                }).AllowPaging().PageSettings(page => page.PageSize(5)).Render() 

 

    </div> 

    <div id="Grid2" style="display: none"> 

        @Html.EJS().Grid("Gridtwo").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 

                 { 

                     col.Field("ShipCity").HeaderText("ShipCity").Width("30%").Add(); 

                     .  .  . 

                 }).AllowPaging().PageSettings(page => page.PageSize(5)).Render() 

 

    </div> 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/tab1721182608  

Regards, 

Pavithra S. 

[nimue]

Hi Pavithra,

Thank you for your answer; Now I understand how to do it.

Barbara Inzitari

[Pavithra Subramaniyam]

Hi Inzitari, 

Thanks for your update. 

We are glad to hear that the provided information helps you. 

Please contact us if you have any queries. 

Regards, 

Pavithra S.