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

Bootstrap tabs and grid doesnt work

Thread ID:

Created:

Updated:

Platform:

Replies:

141260 Dec 2,2018 11:24 PM UTC Dec 3,2018 07:26 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Emil
Asked On December 2, 2018 11:24 PM UTC

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 [Syncfusion]
Replied On December 3, 2018 07:26 AM UTC

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. 


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 
 


CONFIRMATION

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

;