C1GridView:Delete Row Using 'Del' Key

C1GridView supports server side deletion of Rows by pressing the Delete command button. Pressing the delete command button fires the server side RowDeleting event and the particular row is deleted. Now, what if user doesn't want to use the Delete command button. What if he just wants to navigate through the rows using keyboard's Up/Down Arrow keys, select the row and press "Delete" key to remove it. Good news !!! this is very much possible using Wijmo C1GridView :). In this blog we discuss the implementation for the same. To begin with, we need to allow a user to navigate through grid rows and select a row. For that we need to set AllowKeyBoardNavigation to "true" and ClientSelectionMode as "SingleRow". This provides the option to the users to navigate through the grid rows using the Up/Down Arrow Keys and use 'Enter' key to select a particular row. Following is the code implementation of C1GridView at design time.

<wijmo:C1GridView ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="ProductID"  
    DataSourceID="AccessDataSource1" ClientSelectionMode="SingleRow" AllowKeyboardNavigation="true"  
    onrowdeleting="C1GridView1_RowDeleting">  
    <Columns>  
       <wijmo:C1BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True"  
           SortExpression="ProductID">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="ProductName" HeaderText="ProductName"   
            SortExpression="ProductName">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice"   
            SortExpression="UnitPrice">  
       </wijmo:C1BoundField>  
       <wijmo:C1BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"   
             SortExpression="UnitsInStock">  
       </wijmo:C1BoundField>  
    </Columns>  
</wijmo:C1GridView>  
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/C1NWind.mdb"  
     SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock] FROM [Products]">  
</asp:AccessDataSource>  

After selecting a row by pressing 'Enter' key (or using Mouse Click), press "Delete" key. This will raise the client side "KeyDown" event of C1GridView. In this event, first it's checked if 'Del' key is pressed. If so, SelectedRowIndex is retrieved using client side "selection" method of C1GridView. A validation check is implemented which confirms from the user if they want to delete the particular row. If user confirms, Row is deleted by forcing a postback to the server and RowDeleting event is raised for the selected row. If user cancels then no action is performed. Given code snippet shows the implementation.

 <script type="text/javascript">  
   $(document).ready(function () {  
       $("#C1GridView1").keydown(function (e) {  
         //check if delete key was pressed  
         if (e.key == "Del") {  
         //get selected row to be deleted  
         var selectedRowIndex = $("#C1GridView1").c1gridview("selection").selectedCells()._getSelectedRowsIndicies()[0];  
         //confirm before deleting  
         if (confirm("Are you sure you want to Delete Row " + (selectedRowIndex + 1) + "?")) {  
             //if user clicked OK, postback page with row deleting information   
             //RowDeleting event is raised.  
            __doPostBack('C1GridView1', 'delete:' + selectedRowIndex);  
          }  
          else {  
             //if user clicks Cancel, do nothing.  
             return false;  
         }  
      }  
  });  
  //clear the default selection when grid renders.  
  $("#C1GridView1").c1gridview({  
      rendered: function (e) {  
        $("#C1GridView1").c1gridview("selection").clear();  
      }  
   });  
});  
</script>  

Code implementation for RowDeleting server side event in Code Behind:

protected void C1GridView1_RowDeleting(object sender, C1GridViewDeleteEventArgs e)  
{  
   C1GridViewRow row=C1GridView1.Rows[e.RowIndex];  
   int productID=Convert.ToInt32(row.Cells[0].Text);  
   AccessDataSource1.DeleteCommand = "DELETE FROM [Products] WHERE [ProductID] =" + productID;  
}  

Following Screenshot shows the row selection and confirmation popup displayed to the users. Press Delete Key, Click OK and delete the Row, that's All you have to do. ;) Download Sample for complete implementation.