We are using the MVC implementation of KendoUI.
I'm trying to create a form with grids/charts that are driven by whatever value is set in the drop down menu.
For instance the page has a datagrid to display all the visitors to a site, and a graph to model all that data but I need both the grid and the graph to be limited by what site is selected inside the drop down menu.
So if KendoUI is selected in the drop down menu I just want the grid to show all the vistors to KendoUI and the chart to only model the vistors to KendoUI.
How do I link the components together?
I tried using ViewBag to link the items but the problem is each time the user changes the drop down list value I am currently having to do a post back to retrieve the value and re-render the page.
What is the correct way to do this with KendoUI? How do I make a control dependent on another control?
Here is my drop down list, grid and chart:
@(Html.Kendo().DropDownList()
.Name("ddlClient")
.HtmlAttributes(new { style = "width: 273px; font-size: 1.5em;"})
.DataTextField("ClientName")
.DataValueField("ClientName")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetClientList", "Home");
});
})
.Events(e => e.Change("changeClient"))
.Value(ViewBag.ClientName)
)
@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatio>()
.Theme("BlueOpal")
.Name("chartActualHedgeRatio")
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioData", "Home")))
.Series(series =>
{
series.Bar(model => model.Strips);
series.Bar(model => model.Forwards);
series.Bar(model => model.Futures);
series.Bar(model => model.Swaps);
series.Bar(model => model.Swaptions);
series.Bar(model => model.LDFI);
})
.CategoryAxis(axis => axis
.Categories("Actual Hedge Ratio")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
)
)
@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatioTimeSeries>()
.Name("chartActualHedgeRatioTimeSeries")
.Title("Actual Hedge Ratio")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioTimeSeriesData", "Home", new { ddlClient = @ViewBag.ClientName, dpkDate = @ViewBag.Date })))
.Series(series =>
{
series.Area(model => model.Value1, model => model.Date).Name("Nuclear");
series.Area(model => model.Value2, model => model.Date).Name("Hydro");
series.Area(model => model.Value3, model => model.Date).Name("Wind");
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)
I'm trying to create a form with grids/charts that are driven by whatever value is set in the drop down menu.
For instance the page has a datagrid to display all the visitors to a site, and a graph to model all that data but I need both the grid and the graph to be limited by what site is selected inside the drop down menu.
So if KendoUI is selected in the drop down menu I just want the grid to show all the vistors to KendoUI and the chart to only model the vistors to KendoUI.
How do I link the components together?
I tried using ViewBag to link the items but the problem is each time the user changes the drop down list value I am currently having to do a post back to retrieve the value and re-render the page.
What is the correct way to do this with KendoUI? How do I make a control dependent on another control?
Here is my drop down list, grid and chart:
@(Html.Kendo().DropDownList()
.Name("ddlClient")
.HtmlAttributes(new { style = "width: 273px; font-size: 1.5em;"})
.DataTextField("ClientName")
.DataValueField("ClientName")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetClientList", "Home");
});
})
.Events(e => e.Change("changeClient"))
.Value(ViewBag.ClientName)
)
@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatio>()
.Theme("BlueOpal")
.Name("chartActualHedgeRatio")
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Bar().Stack(true)
)
.DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioData", "Home")))
.Series(series =>
{
series.Bar(model => model.Strips);
series.Bar(model => model.Forwards);
series.Bar(model => model.Futures);
series.Bar(model => model.Swaps);
series.Bar(model => model.Swaptions);
series.Bar(model => model.LDFI);
})
.CategoryAxis(axis => axis
.Categories("Actual Hedge Ratio")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
)
)
@(Html.Kendo().Chart<KendoWithChart.Models.ActualHedgeRatioTimeSeries>()
.Name("chartActualHedgeRatioTimeSeries")
.Title("Actual Hedge Ratio")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.DataSource(ds => ds.Read(read => read.Action("GetActualHedgeRatioTimeSeriesData", "Home", new { ddlClient = @ViewBag.ClientName, dpkDate = @ViewBag.Date })))
.Series(series =>
{
series.Area(model => model.Value1, model => model.Date).Name("Nuclear");
series.Area(model => model.Value2, model => model.Date).Name("Hydro");
series.Area(model => model.Value3, model => model.Date).Name("Wind");
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)