SlickGrid-Add row at specified position

SlickGrid-Add row at specified position

by Rituja Veer

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.formatters.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.editors.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<div id="myGrid" style="width:440px;height:200px;border:1px solid;"></div>
<br>
<button type="button" id="addRow" disabled >Add Row</button><br>
<div id="result"></div>

CSS

.emptyTable{
    align-content: center;	text-align: -webkit-center;	height: 20px;	border: 1px solid #d3d3d3;	padding-top: 4px;	font-weight: normal;  color: #555555;	font-size: 8pt;
}
.editor-text{
    width : 100px;    
    text-overflow: ellipsis;
}
.dropdown{
    width: 75px;
    height: 22px;
    padding: 0px;
    z-index: 20;
    width: 100px;
    padding: 2px;
    font-size:11px;
    line-height: 1;
    height: 26px;
    margin-top: -10px;
    margin-right: 319px;
    margin-left: -6px;
    margin-bottom: -9px;

}
.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
        font-size : 14px;
        width : 110px;
        height : 50px;        
}

input.editor-text{
    background: transparent !important;
    border: transparent !important;
}

.customSelected {
    z-index: 10;
    background: #DFE8F6 !important;
}
.ng-invalid {
	border: 1px solid red;
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

body,td,th {
	font-size: 14px;
	margin: 0;
}

table {
	border-collapse: separate;
	border-spacing: 2px;
	display: table;
	margin-bottom: 0;
	margin-top: 0;
	-moz-box-sizing: border-box;
	text-indent: 0;
}

.error {
	color: red;
}

.ui-helper-hidden {
	display: none;
}

JavaScript

function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
      return {valid: false, msg: "This is a required field"};
    } else {
      return {valid: true, msg: null};
    }
  }

  var grid;
  var data = [];
  var columns = [
    {id: "title", name: "Title", field: "title", width: 80, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator},
    {id: "desc", name: "Description", field: "g0-description", width: 100, editor: Slick.Editors.LongText},
    {id: "duration", name: "Duration", field: "g0-duration", editor: Slick.Editors.Text},
      {id: "newCol", name: "NewCol", field: "g0-newCol", editor: Slick.Editors.Text},
    {id: "finish", name: "Finish", field: "finish", editor: Slick.Editors.Date},
  ];
  var options = {
    editable: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false
  };

  $(function () {
    for (var i = 0; i < 500; i++) {
      var d = (data[i] = {});

      d["title"] = "Task " + i;
      d["g0-description"] = "G1 Desc";
      d["g0-duration"] = "10 days";
        d["g0-newCol"] = "1 newCol";
      d["finish"] = "01/05/2009";
    }
    //uncomment to test 'No data available msg'
    //data = [];
    grid = new Slick.Grid("#myGrid", data, columns, options);


    grid.setSelectionModel(new Slick.RowSelectionModel());


if(data.length <=0){
    document.getElementsByClassName("grid-canvas")[0].innerHTML = '';
    
    var emptyTableDiv = document.createElement('div');
emptyTableDiv.className = "emptyTable";
emptyTableDiv.innerHTML = 'No data available.';
document.getElementsByClassName("grid-canvas")[0].appendChild(emptyTableDiv);
        
}

    $("#addRow").on("click",addRow);
    function addRow() {
        debugger;
        var data = grid.getData();
        if(!grid.getActiveCell()){
            return;
        }
        var currRowNum = grid.getActiveCell().row;
        var newrow = jQuery.extend({},...