<h1>
    Delete Rows with Ctrl+Delete
</h1>
<p>
    You can handle keyboard events in the FlexGrid by adding
    HTML event listeners to <b>hostElement</b> of the grid.
</p>
<p>
    For example, the grid below listens to the 'keydown' event.
    If you press Ctrl+Delete, it shows a prompt and deletes the
    current row. Note that:
</p>
<ol>
    <li>
        The event listener is added with the <b>capture</b>
        parameter set to true, so that it is called before the
        grid gets it. 
    </li>
    <li>
        The event handler calls the event's <b>preventDefault</b>
        method, so that the grid does not handle the Delete key as
        it normally would.
    </li>
</ol>

<p>
    Press Ctrl+Delete to remove the current row:
</p>

@Html.C1().FlexGrid().Id("theGrid").AllowAddNew(true).Height(300)
<div id="theDialog" style="display:none">
    <div class="wj-dialog-header">
        Deleting Row
    </div>
    <div class="wj-dialog-body" tabindex="-1">
        Do you really want to delete this row?
    </div>
    <div class="wj-dialog-footer">
        <button class="btn btn-primary wj-hide-ok">Yes</button>
        <button class="btn btn-default wj-hide">No</button>
    </div>
</div>
@Html.C1().Popup("#theDialog")