<h1>
    DataMaps
</h1>
<p>
    In many situations, you may want columns to map values so
    that cells display a value that is different from what is
    actually stored in the grid.
</p>
<p>
    For example, you may have a 'rating' column with values
    ranging from one to three, and you would like to display
    the strings 'Low', 'Medium', or 'High' instead.
</p>
<p>
    Or maybe you have a 'customer' column that contains the
    customer ID, and you would like to display the customer
    name instead.
</p>
<p>
    You could accomplish such tasks using the <b>formatItem</b>
    event, but <b>FlexGrid</b> provides a better alternative:
    <b>DataMaps</b>. If you set a column's <b>dataMap</b> property
    to an instance of a <b>DataMap</b>, the grid will use it to:
</p>
<ul>
    <li>Look up display values for each data item, and</li>
    <li>
        Provide a drop-down list with valid items when editing
        the cells.
    </li>
</ul>
<p>
    For example, the grid below has a 'Customer' column with a
    <b>DataMap</b> that associates customer names and IDs.
    The data source contains customer IDs, but the grid shows
    their names instead, and provides a drop-down list for
    selecting the customer for each item.
</p>
<p>
    The grid also assigns a <b>dataMap</b> to the 'Country'
    column. In this case, the map is just a string array
    with the country names. There is no real mapping, but
    you still get the drop-down list to pick from. Users
    will not be able to enter any countries that are not
    on the list.
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .ShowAlternatingRows(false)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("customer").Header("Customer").Width("1.5*");
        cs.Add().Binding("country").Header("Country").Width("*");
        cs.Add().Binding("downloads").Header("Downloads").Width("*").Format("n0");
        cs.Add().Binding("sales").Header("Sales").Width("*").Format("n0");
        cs.Add().Binding("expenses").Header("Expenses").Width("*").Format("n0");
    })
)

<p>
    And here is another grid showing all the customers.
    If you edit their names, you will see the change in the
    top grid:
</p>
@Html.C1().FlexGrid().Id("theGridCustomers")