SlickGri_Table

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>
<script src="https://rawgit.com/Celebio/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
 <div id="myGrid" style="width:600px;height:500px;"></div>

CSS

body {
  background: #f0e1ef;
  padding: 0;
  margin: 8px;
  margin-left: 230px;
  margin-top: 100px;
}
#myGrid {
  background: white;
  border: 1px solid gray;
  font-family: arial;
  font-size: 10pt;
}
.cell-number {
background-color: #ffff80;
}
/* Currently selected row     
.slick-row.active .slick-cell
{    
  background: #ff8000;
}*/
/* Slick.Editors.Text, Slick.Editors.Date */
input.editor-text {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  background: transparent;
  outline: 0;
  padding: 0;

}

.slick-cell.selected {
  background-color: #ff8000;
}
/*
.customSelected {
    z-index: 10;
    background: red !important;
}*/

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

JavaScript

/***
 * Contains basic SlickGrid editors.
 * @module Editors
 * @namespace Slick
 */

(function ($) {
  // register namespace
  $.extend(true, window, {
    "Slick": {
      "Editors": {
        "Text": TextEditor,
      }
    }
  });

  function TextEditor(args) {
    var $input;
    var defaultValue;
    var scope = this;

    this.init = function () {
      $input = $("<INPUT type=text class='editor-text' />")
          .appendTo(args.container)
          .bind("keydown.nav", function (e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
              e.stopImmediatePropagation();
            }
          })
          .focus()
          .select();
    };

    this.destroy = function () {
      $input.remove();
    };

    this.focus = function () {
      $input.focus();
    };

    this.getValue = function () {
      return $input.val();
    };

    this.setValue = function (val) {
      $input.val(val);
    };

    this.loadValue = function (item) {
      defaultValue = item[args.column.field] || "";
      $input.val(defaultValue);
      $input[0].defaultValue = defaultValue;
      $input.select();
    };

    this.serializeValue = function () {
      return $input.val();
    };

    this.applyValue = function (item, state) {
      item[args.column.field] = state;
    };

    this.isValueChanged = function () {
      return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
    };

    this.validate = function () {
      if (args.column.validator) {
        var validationResults = args.column.validator($input.val());
        if (!validationResults.valid) {
          return validationResults;
        }
      }

      return {
        valid: true,
        msg: null
      };
    };

    this.init();
  }

})(jQuery);

/***
 * Contains basic SlickGrid formatters.
 * 
 * NOTE:  These are merely examples.  You will most likely need to implement something more
 *       ...