This is a migrated thread and some comments may be shown as answers.

How can I put a KendoUI Panel in a TabStrip?

1 Answer 289 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 19 Dec 2013, 03:13 PM
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" });
        })
)

1 Answer, 1 is accepted

Sort by
0
Accepted
Peter
Top achievements
Rank 1
answered on 19 Dec 2013, 05:40 PM
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" });
        })
)

Tags
TabStrip
Asked by
Peter
Top achievements
Rank 1
Answers by
Peter
Top achievements
Rank 1
Share this question
or