@using C1.Web.Mvc.Grid
@model IEnumerable<Company>
@{
    ViewData["Title"] = "ASP.NET Core C1 FlexGrid with dynamic updates";
    List<object> intervals = ViewBag.Intervals;
    List<object> batchSizes = ViewBag.BatchSizes;
}
<script type="text/template" id="template1">
    <div id="{{uid}}">
        <div class="value"></div>
        <div class="chg"></div>
        <div class="glyph"><span></span></div>
        <div class="spark"></div>
    </div>
    <script type="text/javascript">
        formatDynamicCell('{{uid}}', {{row}}, {{column}});
    <\/script>
</script>

<div class="container">
    <h1>Trading information</h1>
    <p>
        Trading information with dynamic updates.
    </p>
</div>
<label>
    Custom Cells
    <input id="customCells" type="checkbox" checked="checked">
</label>
<label>
    Auto Update
    <input id="autoUpdate" type="checkbox" checked="checked">
</label>
<label>
    Update Interval (ms)
    <c1-combo-box id="updateInterval" selected-value="100"
                  is-editable="false" selected-index-changed="updateInterval_SelectedIndexChanged">
        <c1-items-source source-collection="@intervals"></c1-items-source>
    </c1-combo-box>
</label>
<label>
    Batch Size (#items)
    <c1-combo-box id="batchSize" selected-value="5" 
                  is-editable="false" selected-index-changed="batchSize_SelectedIndexChanged">
        <c1-items-source source-collection="@batchSizes"></c1-items-source>
    </c1-combo-box>
</label>
<c1-flex-grid id="theGrid" auto-generate-columns="false"
              is-read-only="true" selection-mode="Row"
              allow-sorting="false" format-item="formatItem" updating-view="updatingView">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-grid-column binding="Name" width="220"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Bid" width="220" format="n2">
        <c1-flex-grid-cell-template id="template1"></c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Ask" width="220" format="n2">
        <c1-flex-grid-cell-template id="template1"></c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="LastSale" header="Last Sale" width="220" format="n2">
        <c1-flex-grid-cell-template id="template1"></c1-flex-grid-cell-template>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="BidSize" header="Bid Size" format="n0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="AskSize" header="Ask Size" format="n0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="LastSize" header="Last Size" format="n0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Volume" format="n0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="QuoteTime" header="Quote Time" format="hh:mm:ss" align="center"></c1-flex-grid-column>
    <c1-flex-grid-column binding="TradeTime" header="Trade Time" format="hh:mm:ss" align="center"></c1-flex-grid-column>
</c1-flex-grid>
