@model IEnumerable<FlexGridData.Sale>

<h1>
    Inline Editing
</h1>
<p>
    Although FlexGrid provides efficient, Excel-style
    editing by default, you may want to customize the
    editing behavior.
</p>
<p>
    If for some reason you don't like the Excel-style
    editing and prefer to add editing buttons to every
    row (typical of editable HTML tables), you can
    accomplish that using the <b>formatItem</b> event
    and a little code.
</p>
<p>
    The grid below demonstrates this approach:
</p>

@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .IsReadOnly(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country").IsRequired(true);
        cs.Add().Binding("Sales").Header("Sales").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Format("n2");
        cs.Add().Binding("Buttons").Header("Edit").Width("160");
    })
)

<!-- template for buttons on items in view mode -->
<div id="tplBtnViewMode" style="display:none">
    <button id="btnEdit" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-pencil"></span> Edit
    </button>
    <button id="btnDelete" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-remove"></span> Delete
    </button>
</div>

<!-- template for buttons on items in edit mode -->
<div id="tplBtnEditMode" style="display:none">
    <button id="btnOK" class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-ok"></span> OK
    </button>
    <button id="btnCancel" class="btn btn-warning btn-sm">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button>
</div>
