Bootstrap tabs and grid doesnt work

[Emil]

I try to have tabbed view using bootstrap and each tab has Grid as below but, only first grid is visible for me. 2nd grid isnt bound. what is the reason for that

    <div class="form-group">

        <ul class="nav nav-tabs">

            <li><a data-toggle="tab" rel='nofollow' href="#item1">item1</a></li>

            <li><a data-toggle="tab" rel='nofollow' href="#item2">item2</a></li>           

        </ul>

        <div class="tab-content">

            <div id="item1" class="tab-pane fade in active">

                <h3>item1</h3>

                @(Html.EJ().Grid<.Models.Db.item1>("Grid1")

                                              .Datasource((IEnumerable<.Models.Db.item1>)Model.item1.ToList())

                                                                   .AllowSorting()

                                                                   .AllowResizeToFit()

                                                                   .AllowResizing()

                                                                   .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowDeleteConfirmDialog(); })

                                                                   .ToolbarSettings(toolbar =>

                                                                   {

                                                                       toolbar.ShowToolbar().ToolbarItems(items =>

                                                                       {

                                                                           items.AddTool(ToolBarItems.Add);

                                                                           items.AddTool(ToolBarItems.Edit);

                                                                           items.AddTool(ToolBarItems.Delete);

                                                                           items.AddTool(ToolBarItems.Update);

                                                                           items.AddTool(ToolBarItems.Cancel);

                                                                       });

                                                                   })

                                                                   .Columns(col =>

                                                                   {

                                                                       col.Field("id").HeaderText("id").TextAlign(TextAlign.Right).Width(75).Add();

                                                                       col.Field("name").HeaderText("name").Width(80).Add();

                                                                   })

                )

            </div>

           

            <div id="item2" class="tab-pane fade">

                <h3>item2</h3>

                 @(Html.EJ().Grid<.Models.Db.item2>("Grid1")

                                              .Datasource((IEnumerable<.Models.Db.item2>)Model.item2.ToList())

                                                                   .AllowSorting()

                                                                   .AllowResizeToFit()

                                                                   .AllowResizing()

                                                                   .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().ShowDeleteConfirmDialog(); })

                                                                   .ToolbarSettings(toolbar =>

                                                                   {

                                                                       toolbar.ShowToolbar().ToolbarItems(items =>

                                                                       {

                                                                           items.AddTool(ToolBarItems.Add);

                                                                           items.AddTool(ToolBarItems.Edit);

                                                                           items.AddTool(ToolBarItems.Delete);

                                                                           items.AddTool(ToolBarItems.Update);

                                                                           items.AddTool(ToolBarItems.Cancel);

                                                                       });

                                                                   })

                                                                   .Columns(col =>

                                                                   {

                                                                       col.Field("id").HeaderText("id").TextAlign(TextAlign.Right).Width(75).Add();

                                                                       col.Field("name").HeaderText("name").Width(80).Add();

                                                                   })

                )

            </div>

           

        </div>

    </div>

[Vignesh Natarajan]

Hi Emil, 

Thanks for using Syncfusion product. We are happy to assist you. 

Query: I try to have tabbed view using bootstrap and each tab has Grid as below but, only first grid is visible for me. 2nd grid isnt bound. what is the reason for that 

We are able to reproduce the reported issue at our end while using your code example. The root cause of the issue is you have defined the same ID for the both the grid. If you want to render the grid inside the tab then, the ID for each grid is must be unique. So, we suggest you to use the different ID for each grid. 

For your convenience we have created the sample, please refer the below link. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1051009745.zip  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan