Drill through on Bar Chart

2 posts, 0 answers
  1. Corey
    Corey avatar
    13 posts
    Member since:
    Sep 2015

    Posted 15 Oct 2015 Link to this post

    I would like to implement a drill through type action on a bar charts series.

    Here is what i have so far:

    @(Html.Kendo().Chart<BetaSMTRApp.Business.PrivateReportCardCumulativeInvestments>()
                                .Name("ChartInvestmentCumulations_" + item.FUND_INT.ToString())
                                //.Title("Cumulative Investments")
                                .Legend(legend => legend
                                            .Position(ChartLegendPosition.Top)
                                        )
                                .DataSource(dataSource => dataSource
                                                .Read(read => read.Action("GetCumulativeInvestments", "PrivateReportCard", new { fundInt = item.FUND_INT }))
                                              )
     
                                .Series(series =>
                                {
                                    series.Column(model => model.Commitments).Name("Commitments").Color("Red");
                                    series.Column(model => model.Distributions).Name("Distributions").Color("Green");
                                    series.Column(model => model.Draw_Down).Name("DrawDowns").Color("Yellow");
                                    series.Column(model => model.Fees).Name("Fees").Color("Brown");
                                })
                                .CategoryAxis(axis => axis
                                    .Categories(model => model.YearCategory)
     
                                )
                                .ValueAxis(axis => axis.Numeric()
                                    .Labels(labels => labels
                                        .Format("${0}")
                                    )
                                )
                                .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Template("#= series.name #: #= value #")
                                )
                                .Events (events=>events.SeriesClick("onSeriesClick"))
     
    )

     

    Javascript/JQuery

    function onSeriesClick(e) {
        $("#window").data("kendoWindow").open();
        $("#undo").hide();
    };

    Kendo Window

    @(Html.Kendo().Window()
        .Name("window")
        .Title("About Alvar Aalto")
        .Content(@<text>
            <div class="armchair">
                <img src="@Url.Content("~/content/web/window/armchair-402.png")"
                     alt="Artek Alvar Aalto - Armchair 402" />
                Artek Alvar Aalto - Armchair 402
            </div>
     
            <p>
                Alvar Aalto is one of the greatest names in modern architecture and design.
                Glassblowers at the iittala factory still meticulously handcraft the legendary
                vases that are variations on one theme, fluid organic shapes that let the end user
                ecide the use. Interpretations of the shape in new colors and materials add to the
                growing Alvar Aalto Collection that remains true to his original design.
            </p>
     
            <p>
                Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland,
                was noted for his humanistic approach to modernism. He studied architecture at the
                Helsinki University of Technology from 1916 to 1921. In 1924 he married architect
                Aino Marsio.
            </p>
     
            <p>
                Alvar Aalto was one of the first and most influential architects of the Scandinavian
                modern movement, and a member of the Congres Internationaux d'Architecture Moderne.
                Major architectural works include the Finlandia Hall in Helsinki, Finland,
                and the campus of Helsinki University of Technology.
            </p>
     
            <p>
                Source:
                <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a>
            </p>
        </text>)
        .Draggable()
        .Resizable()
        .Visible(false)
        .Width(600)
        .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    )

    Oh and yes i know that the window is displaying static text... i will eventually be putting in a Grid to display the detail records (and question #2 relates to it) 

     

    Here are my 2 issues/questions:

    1. The window does pop up when i click on a series.  However the page behind it goes white and only the contents of the window appear.  Is there a way to allow the calling web page still appear (and not go blank).

    2. In the javascript call to open the window is it possible to pass the contents of e to it (e contains parameter values that i want to use in the pop up window).

    Thanks,

    Corey

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Oct 2015 Link to this post

    Hello Corey,

    There are not any known reasons for the page to become blank when opening a window. Can the problem be reproduced on your side in our demos? If not, then could you provide a runnable sample that demonstrates the problem?

    I am not sure if I understand the other question but if the content should be loaded from the server and you need to pass the series click parameters to the action method, then you can set the data option in the object passed to the refresh method. If the content should not be loaded from the server then please clarify how should the parameters be used in the window.

    Regards,
    Daniel
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top