Nesting controls in a tab strip

3 posts, 0 answers
  1. Scott
    Scott avatar
    10 posts
    Member since:
    Aug 2012

    Posted 16 Nov 2012 Link to this post

    Can you nest Grid controls inside a tab strip?  Is so, is there an example?
  2. Matthew
    Matthew avatar
    5 posts
    Member since:
    Sep 2012

    Posted 04 Jan 2013 Link to this post

    You can, but it messes up the style something fierce. I just cannot see to get it to work, even a simple grid inside a tabstrip ends up having zero width and no column attributes applied =(
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Eric
    Eric avatar
    15 posts
    Member since:
    Jun 2012

    Posted 22 Jan 2013 Link to this post

    I found a work around for this. You have to use a js initialized tabstrip. If you try to nest the grid HTML helper inside the .content attribute of the Tabstrip HTML helper, the initialization methods conflict and the tabs don't function.

    <div id="Tabs">
               <ul>
                   <li class="k-state-active">Tab One</li>
                   <li>Tab Two</li>
               </ul>
               <div>
                   @(Html.Kendo().Grid(IEnumerable<Model> models))
               </div>
               <div>
                   @(Html.Kendo().Grid(IEnumerable<Model> models))
               </div>
           </div>
     
    <script type="text/javascript">
     
             
            $("#Tabs").kendoTabStrip({
                animation:  {
                    open: {
                        effects: "fadeIn"
                    }
                }  
            });
    </script>
    Slightly obnoxious, but it works just fine.

    Slightly more obnoxious, but it works just fine.
Back to Top