SlickGrid Dirty detection

Detects the dirty row, conditionally cell formatting

by sonal Jambhule

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css">
<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>
<script src="https://rawgit.com/Celebio/SlickGrid/master/plugins/slick.checkboxselectcolumn.js"></script>
<script src="https://rawgit.com/Celebio/SlickGrid/master/controls/slick.columnpicker.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Celebio/SlickGrid/master/controls/slick.columnpicker.css">
<script src="https://github.com/mleibman/SlickGrid/blob/master/images/arrow_undo.png"></script>
<div id="myGrid" style="width:auto;height:200px;"></div>
<button type="button" id="save">Save</button>
<div id="result"></div>

CSS

/*style the main menu*/
.myMenu {
	margin:0;
	padding:0;
}

.slick-cell-checkboxsel {
      background: #f0f0f0;
      border-right-color: silver;
      border-right-style: solid;
    }

.myMenu li {
	list-style:none;
	float:left;
	font:12px Arial, Helvetica, sans-serif #111;
}

.myMenu li a:link, .myMenu li a:visited {
	display:block;
	text-decoration:none;
	background-color:#09F;
	padding: 0.5em 2em;
	margin:0;
	border-right: 1px solid #fff;
	color:#111;
     }

.myMenu li a:hover {
	background-color:#0CF;	
}

/*style the sub menu*/
.myMenu li ul {
	position:absolute;
	visibility:hidden;
	border-top:1px solid #fff;
	margin:0;
	padding:0;
}

.myMenu li ul li {
	display:inline;
	float:none;
}

.myMenu li ul li a:link, .myMenu li ul li a:visited {
	background-color:#09F;
	width:auto;
}

.myMenu li ul li a:hover {
	background-color:#0CF;	
}

.red{
    background: red !important;
}

.green{
    background: green !important;
}

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

.customSelected {
    z-index: 10;
    background: blue!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: 0px;
	display: table;
	margin-bottom: 0;
	margin-top: 0;
	-moz-box-sizing: border-box;
	text-indent: 0;
}

a:link,a:visited,a:hover {
	color: #5D6DB6;
	text-decoration: none;
}

.error {
	color: red;
}

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

 

    .select-div{
width: 75px;
height: 22px;

background: url(arrowhead.png) no-repeat right #363636;
border-top:#575757 1px solid;
-webkit-border-radius: 8px 8px 8px 8px;
 -moz-border-radius:8px 8px 8px 8px;
      border-radius: 1px 1px 1px 1px;
-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0...

JavaScript

debugger;

  var selectedColNum, selectedRowNum;
  var grid;
  var data = [];



var columns = [{id:"checkbox",name: "check",field:"check",editor: Slick.Editors.Checkbox,formatter: Slick.Formatters.Checkmark},
                {id: "title", name: "Title", field: "title", editor: Slick.Editors.Text},
                {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text,formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === '5 days'){
    
                      return '<select id="select" class="select-div" style="font-size:10px"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>';
                  }

    return '<INPUT type=text class="editor-text"  />';
             }},
                {id: "%", name: "% Complete", field: "percentComplete", editor: Slick.Editors.Text},
                {id: "start", name: "Start", field: "start", editor: Slick.Editors.Text},
                {id: "finish", name: "Finish", field: "finish", editor: Slick.Editors.Text},
                {id: "effort-driven", name: "Effort Driven", field: "effortDriven", editor: Slick.Editors.Text},
       {id: "NewCol", name: "NewCol", field: "duration", editor: Slick.Editors.Text, formatter: function ( row, cell, value, columnDef, dataContext ) {
                  if(value === '3 days'){
    
                      return '<select id="select-div" class="select-div" style="font-size:10px"><option value="volvo">Volvo</option><option value="saab" >Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>';
                  }

    return '<INPUT type=text class="editor-text"  />';
             }},
            ];
    
    function queueAndExecuteCommand(item, column, editCommand) {
        item['_update']=true;//like this conditionally check for add, delete
        modRecords.push(item);
      ...