Tabstrip in grid details template - Get content from partial view

3 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Feb 2013

    Posted 01 Feb 2013 Link to this post

    Hi

    I'm struggling to get a tabstrip to get it's content from a partial view when it's in a details template of a grid view as I get an invalid template error.

    If I take the tabstrip out of the grid details view it works fine.

    The code:

    <script id="expscenDetail" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
               .Name("TabStrip")
               .SelectedIndex(0)
               .Items(items =>
                {
                    items.Add().Text("Chart")
                        .LoadContentFrom("_eDetail", "Tray")
                        .Selected(true);
                    items.Add().Text("Text")
                        .LoadContentFrom("_eDetail", "Tray");
                }))
    </script>

    _eDetail - partial view
    <div >
        <ul>
            <li><label>Code:</label></li>
        </ul>
    </div>
    Controller
    public ActionResult _eDetail()
     {
                return PartialView();
     }

    If I put a break point on the controller it doesn't even get hit, so I believe it's a problem with how the loadcontent() part is parsed.

    The error:
    <div class="k-widget k-tabstrip k-header" id="TabStrip"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link">Chart</a></li><li class="k-item k-state-default"><a class="k-link">Text</a></li></ul><div class="k-content k-state-active" id="TabStrip-1" style="display:block"></div><div class="k-content" id="TabStrip-2"></div></div><script>
        jQuery(function(){jQuery("#TabStrip").kendoTabStrip({"contentUrls":["/Tray/_eDetail","/Tray/_eDetail"]});});
    ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n    <div class="k-widget k-tabstrip k-header" id="TabStrip"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link">Chart</a></li><li class="k-item k-state-default"><a class="k-link">Text</a></li></ul><div class="k-content k-state-active" id="TabStrip-1" style="display:block"></div><div class="k-content" id="TabStrip-2"></div></div><script>\n\tjQuery(function(){jQuery("';TabStrip").kendoTabStrip({"contentUrls":["/Tray/_eDetail","/Tray/_eDetail"]});});
    ;o+=;}return o;'
    Is there anyway around this? Or am I just trying to take it a step too far?

    Thanks
  2. Andrew
    Andrew avatar
    2 posts
    Member since:
    Feb 2013

    Posted 04 Feb 2013 Link to this post

    Not sure why I put this in the ListView forum... I meant to put it in the tabstrip forum.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 05 Feb 2013 Link to this post

    Hello Andrew,

    You should call the ToClientTemplate method of the control when used in a template e.g.

    @(Html.Kendo().TabStrip()
        .Name("TabStrip")
        .SelectedIndex(0)
        .Items(items =>
        {
            items.Add().Text("Chart")
                .LoadContentFrom("_eDetail", "Tray")
                .Selected(true);
            items.Add().Text("Text")
                .LoadContentFrom("_eDetail", "Tray");
        })
        .ToClientTemplate()
    )
    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top