SlickGrid Grid Counts

by Leonardo Trimarchi

HTML

<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/css/smoothness/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/examples/examples.css">
<link rel="stylesheet" href="https://rawgithub.com/mleibman/SlickGrid/master/controls/slick.columnpicker.css">
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/firebugx.js"></script>

<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery-1.7.min.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>

<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.core.js"></script>
        <script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.checkboxselectcolumn.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.autotooltips.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellcopymanager.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/controls/slick.columnpicker.js"></script>
<script src="https://rawgithub.com/mleibman/SlickGrid/master/slick.formatters.js"></script>
<script...

CSS

.slick-cell.copied {
      background: blue;
      background: rgba(0, 0, 255, 0.2);
      -webkit-transition: 0.5s background;
    }

JavaScript

var grid;
var data = [];
var columns = [{
    id: "policynumber",
    name: "Policy Number",
    field: "Policy Number",
    width: 100
}, {
    id: "issuedate",
    name: "Issue Date",
    field: "issuedate"
}, {
    id: "insuredname",
    name: "Insured Name",
    field: "insuredname",
    width: 100
}, {
    id: "policystatus",
    name: "Policy Status",
    field: "policystatus"
}, {
    id: "policytype",
    name: "Policy Type",
    field: "policytype",
    width: 120
}, {
    id: "requestdate",
    name: "Request Date",
    field: "requestdate"
}, {
    id: "denialreason",
    name: "Reason For Denial",
    field: "denialreason",
    width: 200,
    editor: Slick.Editors.Text

},
{
    id: "newgrid",
    name: "newgrid",
    field: "newgrid",
    width: 80,
    sortable: true,
    formatter: reportFormatter
}
];

var checkboxApprove = new Slick.CheckboxSelectColumn({
    cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxApprove.getColumnDefinition());
var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: false,
    autoEdit: false,
    headerRowHeight: 60
};

function reportFormatter(row, cell, value, columnDef, dataContext) {
    return "<button class='show-report'>details</button>";
}

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

     function FormulaEditor(args) {
    var _self = this;
    var _editor = new Slick.Editors.Text(args);
    var _selector;
    $.extend(this, _editor);
    function init() {
      // register a plugin to select a range and append it to the textbox
      // since events are fired in reverse order (most recently added are executed first),
      // this will override other plugins like moverows or selection model and will
      // not require the grid to not be in the edit mode
      _selector = new Slick.CellRangeSelector();
      _selector.onCellRangeSelected.subscribe(_self.handleCellRangeSelected);
     ...