This is a migrated thread and some comments may be shown as answers.

MVC - Drop down list to drive the content of the whole page

1 Answer 89 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 26 Sep 2013, 04:56 PM
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}")
    )
)




1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 30 Sep 2013, 07:33 AM
Hello William,

 
In otder to achieve the required function you can wire the change event of the DropDownList and filter sources of the other widgets.  Here is one possible way to accomplish this task:

  1. Wire the change event of the dropdownlist.
  2. When event raises get the data sources of the widgets - the grid and chart.
  3. Filter sources based on the value of the dropdownlist.

Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
William
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or