How can I put a KendoUI Panel in a TabStrip?

2 posts, 1 answers
  1. Peter
    Peter avatar
    2 posts
    Member since:
    May 2012

    Posted 19 Dec 2013 Link to this post

    Hi,

    I'm kind of new to Kendo UI, and I'm now trying to put a Panel Bar inside of a Tab Strip with the following code. The error I get is "Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed." It seems to get stuck on the .Content-part under "UnitLogInfo". Any help is really appreciated.

    Thanks,
    Peter
    @(Html.Kendo().TabStrip()
            .Name("SettingsTabStrip")
            .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text("Phone")
                    .Selected(true)
                    .Content(@<text>
                        @(Html.Kendo().PanelBar()
                            .Name("IntroPanelBar")
                            .Items(panelItems =>
                            {
                                panelItems.Add()
                                    .Text("OrtSettings")
                                    .Selected(true)
                                    .Expanded(true)
                                    .Content(@<text>
                                        <p style="padding:0 1em">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                            Donec egestas nisi at hendrerit molestie. Nunc sed lectus vel
                                            enim accumsan faucibus ut vel erat. Quisque pharetra ante mi,
                                            vitae volutpat odio tincidunt sed. Nam et elementum tellus.
                                            Nunc non tellus nisi. Aliquam vitae est ut mi gravida cursus
                                            ut in erat. Praesent eu sollicitudin dui.                                    
                                        </p>
                                    </text>);
                                panelItems.Add()
                                    .Text("UnitLogInfo")
                                    .Content(@<text>
                                        <p style="padding:0 1em">
                                            Aliquam tincidunt luctus augue, vitae tempus tortor ultrices a.
                                            Donec turpis lorem, tempor sed orci ut, volutpat sodales augue.
                                            In egestas, tellus ac vestibulum pharetra, erat lectus facilisis
                                            ligula, eu sollicitudin felis leo sed nibh.                                    </p>
                                    </text>);
                            })
                        )
                    </text>)
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
                tabstrip.Add()
                    .Text("Email")
                    .Content(@<text>
                        <p>
                            <span class="label">Support:</span>
                            <span><a href="mailto:Support@example.com">Support@example.com</a></span>
                        </p>
                        <p>
                            <span class="label">Marketing:</span>
                            <span><a href="mailto:Marketing@example.com">Marketing@example.com</a></span>
                        </p>
                        <p>
                            <span class="label">General:</span>
                            <span><a href="mailto:General@example.com">General@example.com</a></span>
                        </p>
                    </text>)
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
                tabstrip.Add()
                    .Text("Address")
                    .Content(@<text>
                        <p>
                            One Microsoft Way<br />
                            Redmond, WA 98052-6399
                        </p>
                    </text>)
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
            })
    )

  2. Answer
    Peter
    Peter avatar
    2 posts
    Member since:
    May 2012

    Posted 19 Dec 2013 Link to this post

    Ok, I solved it myself. Like I said, I'm kind of new to Kendo UI.
    But kind of simple and clear once you see the whole picture. The solution is of course to use a lambda expression where the .Content for the first tabstrip is used, i.e.   
    .Content(panel => Html.Kendo().PanelBar()
                                      .Name("......")
                                      .Items(.....)  etc..

     Below is the corrected code.
    @(Html.Kendo().TabStrip()
            .Name("SettingsTabStrip")
            .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text("OrtSettings")
                    .Selected(true)
                    .Content(panel => Html.Kendo().PanelBar()
                            .Name("IntroPanelBar")
                            .Items(panelItems =>
                            {
                                panelItems.Add()
                                    .Text("OrtSettings")
                                    .Selected(true)
                                    .Expanded(true)
                                    .Content(@<text>
                                        <p style="padding:0 1em">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                            Donec egestas nisi at hendrerit molestie. Nunc sed lectus vel
                                            enim accumsan faucibus ut vel erat. Quisque pharetra ante mi,
                                            vitae volutpat odio tincidunt sed. Nam et elementum tellus.
                                            Nunc non tellus nisi. Aliquam vitae est ut mi gravida cursus
                                            ut in erat. Praesent eu sollicitudin dui.
                                        </p>
                                    </text>);
                                panelItems.Add()
                                    .Text("UnitLogInfo")
                                    .Content(@<text>
                                        <p style="padding:0 1em">
                                            Aliquam tincidunt luctus augue, vitae tempus tortor ultrices a.
                                            Donec turpis lorem, tempor sed orci ut, volutpat sodales augue.
                                            In egestas, tellus ac vestibulum pharetra, erat lectus facilisis
                                            ligula, eu sollicitudin felis leo sed nibh.
                                        </p>
                                    </text>);
                            })
                    )
     
                     
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
                tabstrip.Add()
                    .Text("UnitLogInfo")
                    .Content(@<text>
                        <p>
                            <span class="label">Support:</span>
                            <span><a href="mailto:Support@example.com">Support@example.com</a></span>
                        </p>
                        <p>
                            <span class="label">Marketing:</span>
                            <span><a href="mailto:Marketing@example.com">Marketing@example.com</a></span>
                        </p>
                        <p>
                            <span class="label">General:</span>
                            <span><a href="mailto:General@example.com">General@example.com</a></span>
                        </p>
                    </text>)
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
                tabstrip.Add()
                    .Text("Contact Info")
                    .Content(@<text>
                        <p>
                            One Microsoft Way<br />
                            Redmond, WA 98052-6399
                        </p>
                    </text>)
                    .ContentHtmlAttributes(new { style = "min-height: 200px" });
            })
    )

  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top