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

Tabstrip in grid details template - Get content from partial view

2 Answers 313 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 01 Feb 2013, 03:17 PM
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 Answers, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
answered on 04 Feb 2013, 09:10 AM
Not sure why I put this in the ListView forum... I meant to put it in the tabstrip forum.
0
Daniel
Telerik team
answered on 05 Feb 2013, 11:15 AM
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!
Tags
ListView
Asked by
Andrew
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or