<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="shortcut icon" type="image/ico" href="favicon.ico" />

<title>SlickGrid example 2: Formatters</title>

<link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>

<link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>

<link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>

<style>

.cell-title {

font-weight: bold;

}

.cell-effort-driven {

justify-content: center;

}

.green {

background-color: #d1e7dd;

}

.red {

background-color: #f8d7da;

}

.orange {

background-color: #fff3cd;

}

</style>

<h2 class="title">Example 2 - Custom Formatters</h2>

<table width="100%">

<tr>

<td valign="top" width="50%">

<div id="myGrid" class="slick-container" style="width:700px;height:500px;"></div>

</td>

<td valign="top">

<h2>

<a href="/examples/index.html" style="text-decoration: none; font-size: 22px">&#x2302;</a>

Demonstrates:

</h2>

<ul>

<li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>

<li>custom column formatters</li>

<li>an extended formatter returning an object { text, removeClasses, addClasses, toolTip } rather than a string, allowing adding and removing css classes from the cell. You can also optionally use toolTip to fill the "title" attribute</li>

</ul>

<h2>View Source:</h2>

<ul>

<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example2-formatters.html" target="_sourcewindow"> View the source for this example on Github</a></li>

</ul>

</td>

</tr>

<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

<script src="sortable-cdn-fallback.js"></script>

<script src="../dist/browser/slick.core.js"></script>

<script src="../dist/browser/slick.interactions.js"></script>

<script src="../dist/browser/slick.grid.js"></script>

<script src="../dist/browser/slick.editors.js"></script>

<script src="../dist/browser/slick.formatters.js"></script>

// a standard formatter returns a string

function formatter(row, cell, value, columnDef, dataContext) {

return value;

}

// an extended formatter returns an object { text, removeClasses, addClasses, toolTip }

// the classes are removed and then added during an update, or just added on cell creation

function statusFormatter(row, cell, value, columnDef, dataContext) {

var rtn = { text: value, removeClasses: 'red orange green' };

if (value !== null && value !== "") {

if (value < 33) {

rtn.addClasses = "red";

rtn.toolTip = "danger zone";

} else if (value < 66) {

rtn.addClasses = "orange";

rtn.toolTip = "might want to look at it";

} else {

rtn.addClasses = "green";

rtn.toolTip = "all good";

}

}

return rtn;

}

var grid;

var data = [];

var columns = [

{id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},

{id: "duration", name: "Duration", field: "duration"},

{id: "%", name: "% Complete", field: "percentComplete", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},

{id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter, editor: Slick.Editors.Text },

{id: "start", name: "Start", field: "start", minWidth: 60},

{id: "finish", name: "Finish", field: "finish", minWidth: 60},

{id: "effort-driven", name: "Effort Driven", sortable: false, width: 90, minWidth: 20, maxWidth: 90, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}

];

var options = {

editable: true,

enableAddRow: false,

enableCellNavigation: true,

createPreHeaderPanel: true

};

for (var i = 0; i < 5; i++) {

var d = (data[i] = {});

d["title"] = "<a href='#' tabindex='0'>Task</a> " + i;

d["duration"] = "5 days";

d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));

d["start"] = "01/01/2009";

d["finish"] = "01/05/2009";

d["effortDriven"] = (i % 5 == 0);

}

grid = new Slick.Grid("#myGrid", data, columns, options);