Chart inside tabstrip

4 posts, 1 answers
  1. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 20 Jun 2012 Link to this post

    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
  2.
  3. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 22 Jun 2012 Link to this post

    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
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 25 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 25 Jun 2012 Link to this post

    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
  8.
Back to Top