Tabstrip in grid details template - Get content from partial view

[Andrew]

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

[Andrew]

Not sure why I put this in the ListView forum... I meant to put it in the tabstrip forum.

[Daniel]

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