<h1>
    Dynamic Updates
</h1>
<p>
    FlexGrid updates all cells automatically when there
    are changes in its data source.
</p>
<p>
    If you have a data source where only a few items change
    frequently, it is more efficient to update only
    the cells bound to items that have actually changed.
</p>
<p>
    The grid below uses the <b>formatItem</b> event to keep
    track of the cell elements for each data item. When the
    data changes, it updates only the affected cells rather
    than the whole grid.
</p>
<div class="demo-settings">
    <label>Custom Cells</label>
    <input id="customCells" type="checkbox" checked="checked">
    <br />
    <label>Auto Update</label>
    <input id="autoUpdate" type="checkbox" checked="checked">
    <br />
    <label>Update Interval (ms)</label>
    @(Html.C1().ComboBox<int>().Id("updateInterval").Bind(new[] { 1000, 500, 100, 10, 1 }).SelectedValue(100))
    <br />
    <label>Batch Size (# items)</label>
    @(Html.C1().ComboBox<int>().Id("batchSize").Bind(new[] { 100, 50, 10, 5, 1 }).SelectedValue(5))
</div>

@(Html.C1().FlexGrid().Id("theGrid")
    .IsReadOnly(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("name").Header("Name").Width("200");
        cs.Add().Binding("bid").Header("Bid").Format("n2").Width("200");
        cs.Add().Binding("ask").Header("Ask").Format("n2").Width("200");
        cs.Add().Binding("lastSale").Header("Last Sale").Format("n2").Width("200");
        cs.Add().Binding("bidSize").Header("Bid Size").Format("n0");
        cs.Add().Binding("askSize").Header("Ask Size").Format("n0");
        cs.Add().Binding("lastSize").Header("Last Size").Format("n0");
        cs.Add().Binding("volume").Header("Volume").Format("n0");
        cs.Add().Binding("quoteTime").Header("Quote Time").Format("hh:mm:ss").Align("center");
        cs.Add().Binding("quoteTime").Header("Quote Time").Format("hh:mm:ss").Align("center");
    })
    .Filterable()
)