@using MultipleControlsBinding.Models;
@using C1.Web.Mvc;
@model List<Fruit>

@{
    ViewBag.Title = "ASP.NET MVC Multiple Controls Binding";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var settings = (Dictionary<string, object[]>)ViewBag.Settings;
}

<div class="header">
    <div class="container">
        <img src="@Url.Content("~/Content/c1logo.png")" alt="Component One ASP.NET MVC" />
        <h1>
            ASP.NET MVC Multiple Controls Binding
        </h1>
        <p>
            This page shows how to bind one CollectionView to multiple controls.
        </p>
    </div>
</div>

<div class="container">
    <div class="sample-page download-link">
        <a href="http://www.componentone.com/Download/">Download Free Trial</a>
    </div>
    <!-- Getting Started -->
    <div>
        <h2>Getting Started</h2>
        <p>
            Steps for getting started with the Multiple Controls Binding in MVC application:
        </p>
        <ol>
            <li>Create a CollectionViewService and set id for it.</li>
            <li>Create a FlexGrid control and set it's ItemsSourceId to the id of CollectionViewService.</li>
            <li>Create a FlexChart control and set the same ItemsSourceId with FlexGrid.</li>
        </ol>
        <p>
            This will create a FlexGrid and a FlexChart and they will bind to the same CollectionView, so if
            we change the data of FlexGrid, we can see the data also changes in FlexChart.
        </p>
        @(Html.C1().CollectionViewService<Fruit>().Id("fruitsSales")
                                .Bind(Model).Update(Url.Action("Update", "Home"))
                                .Delete(Url.Action("Delete", "Home"))
                                .Create(Url.Action("Create", "Home")))
        <div class="row">
            <div class="col-md-5">
                <h4>FlexGrid :</h4>
                @(Html.C1().FlexGrid<Fruit>().Id("flexGrid")
                        .Columns(cls =>
                        {
                            cls.Add(col => col.Binding("ID").Visible(true).IsReadOnly(true).Width("40"));
                            cls.Add(col => col.Binding("Name").Width("*"));
                            cls.Add(col => col.Binding("Country").Width("*"));
                            cls.Add(col => col.Binding("MarPrice").Width("*"));
                            cls.Add(col => col.Binding("AprPrice").Width("*"));
                            cls.Add(col => col.Binding("MayPrice").Width("*"));
                        })
                    .IsReadOnly(true)
                    .AllowSorting(true)
                    .ItemsSourceId("fruitsSales")
                    .AutoGenerateColumns(false)
                    .IsReadOnly(false)
                    .AllowAddNew(true)
                    .AllowDelete(true)
                    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
                )
            </div>
            <div class="col-md-7">
                <h4>FlexChart :</h4>
                @(Html.C1().FlexChart().Id("flexChart").Header("Fruits Sales")
                            .ItemsSourceId("fruitsSales").BindingX("Name").Series(sers =>
                    {
                        sers.Add().Binding("MarPrice").Name("March");
                        sers.Add().Binding("AprPrice").Name("April");
                        sers.Add().Binding("MayPrice").Name("May");
                    }).SelectionMode(C1.Web.Mvc.Chart.SelectionMode.Point)
                )
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">Chart Type</label>
                        <div class="col-md-4">
                            @(Html.C1().ComboBox().Id("typeMenu")
                                    .Bind(settings["ChartType"]).Text("Column")
                                    .OnClientSelectedIndexChanged("typeMenu_SelectedIndexChanged")
                            )
                        </div>
                        <label class="col-md-2 control-label">Rotated</label>
                        <div class="col-md-4">
                            @(Html.C1().ComboBox().Id("rotatedMenu")
                                     .Bind(settings["Rotated"]).Text("False")
                                     .OnClientSelectedIndexChanged("rotatedMenu_SelectedIndexChanged")
                            )
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
