@model List<Fruit>

@{
    ViewBag.Title = "ASP.NET Core 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("~/images/c1logo.png")" alt="Component One ASP.Net MVC" />
        <h1>
            ASP.NET Core Multiple Controls Binding
        </h1>
        <p>
            This page shows how to bind one CollectionView to multiple controls in ASP.NET Core.
        </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 by using @("<c1-items-source>") tag 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 changed in FlexChart.
        </p>
        <c1-items-source id="fruitsSales" source-collection="Model" update-action-url="/Home/Update"
                         delete-action-url="/Home/Delete" create-action-url="/Home/Create">
        </c1-items-source>
        <div class="row">
            <div class="col-md-5">
                <h4>FlexGrid :</h4>
                <c1-flex-grid id="flexGrid" is-read-only="false" auto-generate-columns="false"
                              allow-add-new="true" allow-delete="true" items-source-id="fruitsSales" 
                              selection-mode="C1.Web.Mvc.Grid.SelectionMode.Row">
                    <c1-flex-grid-column binding="ID" width="*" is-read-only="true"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Name" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="MarPrice" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="AprPrice" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="MayPrice" width="*"></c1-flex-grid-column>
                </c1-flex-grid>
            </div>
            <div class="col-md-7">
                <h4>FlexChart :</h4>
                <c1-flex-chart id="flexChart" items-source-id="fruitsSales" binding-x="Name"
                               selection-mode="C1.Web.Mvc.Chart.SelectionMode.Point" header="Fruits Sales">
                    <c1-flex-chart-series binding="MarPrice" name="March"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="AprPrice" name="April"></c1-flex-chart-series>
                    <c1-flex-chart-series binding="MayPrice" name="May"></c1-flex-chart-series>
                </c1-flex-chart>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-2 control-label">Chart Type</label>
                        <div class="col-md-4">
                            <c1-combo-box id="typeMenu" text="Column"
                                          selected-index-changed="typeMenu_SelectedIndexChanged">
                                <c1-items-source source-collection="@(settings["ChartType"])"></c1-items-source>
                            </c1-combo-box>
                        </div>
                        <label class="col-md-2 control-label">Rotated</label>
                        <div class="col-md-4">
                            <c1-combo-box id="rotatedMenu" text="False"
                                          selected-index-changed="rotatedMenu_SelectedIndexChanged">
                                <c1-items-source source-collection="@(settings["Rotated"])"></c1-items-source>
                            </c1-combo-box>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
