Chart inside tabstrip

[Ian]

Hi,
I have a tabstrip with two tabs and want to include a Kendo chart in the first tab. I can't work out whether it's possible to do this using the Kendo MVC helpers? If it is possible, does anybody have any example Razor code that explains how it can be done.

Thanks, IP

[Ian]

Update from myself...

I couldn't figure out a way to include a chart inside a tabstrip just using the Kendo MVC helper methods. What I did in the end was to create the tabstrip client-side using the standard Kendo JavaScript helpers.

I then appended the two tabs and configured the first to populate its content using an MVC3 partial view and controller with the JavaScript code below.

tabStrip.append([
{
    text: "Chart",
    encoded: false,
contentUrl: "/Partial/SummaryAnalysis/" + @(ViewBag.AssessmentId)
},
{
    text: "Actions",
    contentUrl: "/Content/Marketing/DashboardActions.htm"
}
]);

The partial view does use the Kendo MVC Chart helper to create the chart. Everything seems to work fine although I did end up having to duplicate some code in the main and partial controllers for authorisation checking.

If anybody does find a way to insert a Kendo control inside another using just the MVC helpers I'd still be interested to know.

Regards, Ian

[Alexander Valchev]

Hello Ian,

It is possible to include kendo chart is a tabStrip using KendoUI for MVC. For example:

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(items =>
    {
        items.Add().Text("Chart")
            .LoadContentFrom("TabStrip_Chart", "Home")
            .Selected(true);
        items.Add().Text("Text")
            .LoadContentFrom("TabStrip_Text", "Home");
    })
)

where "TabStrip_Chart" is the partial view that contains your chart. For convenience I prepared a small project that uses the aforementioned approach in action. Please check the attachments and let me know if I missed something.

Kind regards,
Alexander Valchev
the Telerik team

[Ian]

Hi Alexander,
Your solution works really well. In fact, by using the MVC Chart helper in the partial view, both the tabstrip and chart can all be created just using MVC helpers without having to write any client-side code. Very neat!

Thanks for the reply.
Bets regards, Ian