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