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>
