Demo - FlexGrid shortcuts to Add/Remove rows

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid shortcuts to Add/Remove rows
  </h1>
  <p>
    The FlexGrid supports adding and deleting rows via its 
    <b>allowAddNew</b> and <b>allowDelete</b> properties.</p>
  <p>
    You can add your own keyboard shortcuts and use those 
    instead of the standard properties if you prefer.
    This example uses the <b>ctrl+I</b> and <b>ctrl+D</b>
    keys to insert and delete rows:</p>
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
  });
  
  var ddlDSlist = [{ id: 1, Description: 'ddlItem1' },
                           { id: 865, Description: 'ddlItem2' },
                           { id: 1000, Description: 'ddlItem3' },
                           { id: 1950, Description: 'ddlItem4' }];
                           
refillAccountsDDL(theGrid, ddlDSlist);


	// create some random data
	function refillAccountsDDL(wijmoGridObject, accountsDataSource) 
  {
     var accountsMap = new wijmo.grid.DataMap(accountsDataSource, "id", "Description");
     var colAccountObj = wijmoGridObject.getColumn("CollectorAccountId");
     if (colAccountObj != null) 
     		colAccountObj.dataMap = accountsMap;
       
 }
    
function getData() {
var data = [];
data.push({SR_: 1, 
ID: '58', 
PaymentType: 'Cash', 
DocumentCode: 'SO-1-12247', 
CollectorAccountId: null, 
Amount: 200.0000, 
});
data.push({SR_: 2, 
ID: '59', 
PaymentType: 'Cash', 
DocumentCode: 'SO-1-12247', 
CollectorAccountId: 1950, 
Amount: 62.0000, 
});
return data; }
}