Develop Reference

Uncaught TypeError: Cannot read property 'addPoint' of undefined ( Highstock live data)

As I posted a previous question, I am using Highcharts to consume a REST API (Spring app) (http://85614a50.ngrok.io/api/devices) with 2 series (axes)
The first series is memory vs time, so the object contains (Memory usage, timestamp).
The second series is CPU vs time, so the object contains (CPU Usage, timestamp).
This data is static right now, but I want it to be dynamic.
I created a function which does a call to the REST API every 5 seconds and an event function inside the Chart refreshing every 5 seconds.
I tried to declare variables inside the event function with series, but it gives me this error:
Uncaught TypeError: Cannot read property 'addPoint' of undefined
Code Pen example: https://codepen.io/anon/pen/eLEyGb
Home.blade.php
#extends('index.app')
#section('main')
<style type="text/css">
#container{
width: 100%;
margin: 0 auto;
}
.col-lg-4 {
margin-bottom: 10%;
min-width: 40%;
max-width: 100%;
margin: 1em auto;
height: 400px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10%; /* Location of the box */
padding-right: 10%;
padding-left: 10%;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#container.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="container">
<div class="row"></div>
</div>
<script type="text/javascript">
$(function () {
setInterval(getHighChart, 10000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
$.getJSON( "http://localhost:8000/api/devices", function( data ) {
console.log(data);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientName"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "Id_client"), "Id_client");
var devices= [];
_.forEach(mappedClients, function(Id_client, clientName) {
var tempClient = {
Allias: mappedClientsAllias[clientName],
name: Id_client,
data: [],
memory:[]
};
tempClient2=tempClient;
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push([
clientData.timestamp,
clientData.cpuUsage,
]);
tempClient.memory.push([
clientData.timestamp,
clientData.memoryUsage,
]);
});
}
});
devices.push(tempClient);
});
console.log("devices", devices);
var chart = _.forEach(devices, function(device) {
$('<div class="col-lg-4">')
.css("position", "relative")
.appendTo("#container")
.highcharts("StockChart", {
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -5 * 60
},
exporting: {
buttons: {
customButton3: {
text: 'Zooming',
//make fullscreen of chart with size change
onclick: function(b) {
var w = $(window).width();
var h = $(window).height();
$(b.target).closest('#container').toggleClass('modal');
if($(b.target).closest('#container').hasClass('modal')) {
$('.col-lg-4').hide();
$(b.target).closest('.col-lg-4').show();
$('.col-lg-4').css({
'width': w * .9,
'height': h * .9
});
} else {
$('.col-lg-4').show();
$('.col-lg-4').css({
'width': '',
'height': ''
});
}
$(b.target).closest('.col-lg-4').highcharts().reflow();
}
}
}
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
{
count: 1,
type: "hour",
text: "Min"
},
{
count: 1,
type: "day",
text: "Hours"
},
{
type: "all",
text: "All"
}
],
title: "hours",
inputEnabled: true,
_selected: 1
},
title: {
text: device.Allias
},
yAxis: [{
labels: {
enabled: true,
align: 'right',
x: -3
},
title: {
text: 'CPU'
},
height: '50%',
lineWidth: 2,
color: 'red'
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Memory'
},
top: '70%',
height: '50%',
offset: 0,
lineWidth: 2,
}],
xAxis: {
tickInterval: 1,
title: {
enabled: true,
text: "Client usage"
},
top: '20%',
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b",
week: "%e. %b",
day: "%Y.%b-%d"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [{
name: "Memory USAGE",
data: device.memory.sort()
}, // Add a new series
{
name: "Cpu USAGE",
yAxis: 1,
color: 'red',
data: device.data.sort()
}],
chart: {
renderTo: "container",
height:400,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], false, true);
}, 1000);
}
}
},
});
});
});
}
</script>
#endsection
Layouts.app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
</head>
<body>
#include('file.hed')
#include('file.bar')
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<div class="container">
#include('file.info')
#yield('main')
</div> <!-- /container -->
#include('file.down')
</body>
</html>

You've got the error because of this part of code:
events: {
load: function (series) {
var memory=client.memory.sort();
setInterval(function () {
var x = memory;
series[0].addPoint([x], true, true);
}, 5000);
}
}
There you are passing the series argument to event function, which actually isn't the series. It's just the event. If you want to refer to the series array, please do it like below:
events: {
load: function () {
var memory = client.memory.sort(),
series = this.series;
setInterval(function () {
var x = memory;
series[0].addPoint([x], true, true);
}, 5000);
}
}
BTW. I don't quite understand why you are adding the new chart every 5 seconds, instead of updating old ones.
Live example: https://codepen.io/anon/pen/oPGYoZ

slickgrid vertical scrolling while column reorder

I am using SlickGrid in my project and when i try to reorder columns , web page scrolls vertically and column headers become invisible .I found that in SlickGrid.js , in function setupColumnReorder, start function is called when user begins to drag column. I changed the start and stop functions in setupColumnReorder as below. This time , first time when user begins to drag column header , web page scrolls automatically. When the user drags second time it works as intended and no vertical scrolling occurs . How to prevent vertical scrolling in the first drag operation ?
function setupColumnReorder() {
$headers.filter(":ui-sortable").sortable("destroy");
$headers.sortable({
containment: "parent",
distance: 3,
axis: "x",
cursor: "default",
tolerance: "intersection",
helper: "clone",
placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
start: function (e, ui) {
/********************I added this part******************************************************/
$("body").css("overflow", "hidden");
$(this.parentNode).css("overflow", "hidden");
// window.scrollTo(0, 0) ;
/********************I added this part******************************************************/
ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
$(ui.helper).addClass("slick-header-column-active");
},
beforeStop: function (e, ui) {
$(ui.helper).removeClass("slick-header-column-active");
},
stop: function (e) {
/********************I added this part******************************************************/
$("body").css("overflow", "auto");
$(this.parentNode).css("overflow", "auto");
/********************I added this part******************************************************/
Edit : I am adding an example that vertical scrolling occurs .
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example 2: Formatters</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
<style>
.cell-title {
font-weight: bold;
}
.cell-effort-driven {
text-align: center;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
</style>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery-ui-1.11.3.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.formatters.js"></script>
<script src="../slick.grid.js"></script>
<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 }
// 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";
} else if (value < 66) {
rtn.addClasses = "orange";
} else {
rtn.addClasses = "green";
}
}
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: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
{id: "status", name: "Status", field: "percentComplete", width: 50, resizable: false, formatter: statusFormatter},
{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: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
];
var options = {
editable: false,
enableAddRow: false,
enableCellNavigation: true
};
$(function () {
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);
})
</script>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="position:absolute;top:300px;width:700px;height:500px;"></div>
</td>
<td valign="top">
<h2>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 } rather than a string, allowing adding and removing css classes from the cell</li>
</ul>
<h2>View Source:</h2>
<ul>
<li> View the source for this example on Github</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Edit : The problem seems to be related to Mozilla Firefox. I tested the above code with Google Chrome and no vertical scrolling occurs .

Have you replicated the bug in the basic examples?
You can drag columns in http://6pac.github.io/SlickGrid/examples/example2-formatters.html
Does the problem occur there?
I'm not getting any issues, so if you are please specify the browser and OS you are using.

ExtJS 4.2 export grid data to downloadable CSV file

I want to create a download button in my EXT JS panel which when click download/exports EXTJS grid into downloadable CSV file.
PS: I think we can use store data or the JSON from which i am filling data in grid store to populate data into CSV file
I have tried Ext.ux.CSVExporter but i wasn't able to use it successfully.
My current code is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="Formatter.js"></script>
<script type="text/javascript" src="CSVFormatter/CSVFormatter.js"></script>
<script type="text/javascript" src="ExcelFormatter/Cell.js"></script>
<script type="text/javascript" src="ExcelFormatter/Style.js"></script>
<script type="text/javascript" src="ExcelFormatter/Workbook.js"></script>
<script type="text/javascript" src="ExcelFormatter/Worksheet.js"></script>
<script type="text/javascript" src="ExcelFormatter/ExcelFormatter.js"></script>
<script type="text/javascript" src="Exporter.js"></script>
<script type="text/javascript" src="ExporterButton.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* #cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 225,
/**
* #cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* #cfg {Object} defaultAnimCfg
* <p>A {#link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
easing: 'bounceOut'
},
/**
* Creates new ProgressBarPager.
* #param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.onReady(function() {
var field = [];
var columnList = [];
var counter = {
"levels":
[{
"name": "class",
"samples": [{
"name": "1660SH_3",
"features": [{
"count": 8,
"name": "Bacteroidia"
}, {
"count": 9,
"name": "Bacteroidiaa"
},
{
"count": 10,
"name": "Bacteroidiab"
},
{
"count": 11,
"name": "Bacteroidiac"
}]
}, {
"name": "1660SH_4",
"features": [{
"count": 5,
"name": "Bacteroidia"
}, {
"count": 6,
"name": "Bacteroidiaa"
},
{
"count": 7,
"name": "Bacteroidiab"
},
{
"count": 8,
"name": "Bacteroidiac"
}]
}]
}, ]
};
columnList.push({
header: "Sample v/s Feature",
dataIndex: "Sample v/s Feature",
width: 0.1 * Ext.getBody().getViewSize().width,
columnLines: true,
locked: true
});
field.push("Sample v/s Feature");
for (var p = 0; p < Object.keys(counter.levels[0].samples).length; p++) {
columnList.push({
header: counter.levels[0].samples[p].name,
dataIndex: counter.levels[0].samples[p].name,
flex: 1,
columnLines: true
});
field.push(counter.levels[0].samples[p].name);
}
if (counter.levels[0].name == 'class') {
var mydata=[];
for (var p = 0; p < Object.keys(counter.levels[0].samples[0].features).length; p++)
{
var s = [];
s["Sample v/s Feature"] = '<b>' + counter.levels[0].samples[0].features[p].name + '</b>';
for (var j = 0; j < Object.keys(counter.levels[0].samples).length; j++)
{
s[counter.levels[0].samples[j].name] = counter.levels[0].samples[j].features[p].count;
}
mydata.push(s);
}
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 2,
fields: field,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'json',
root: 'data',
}
}
});
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 2,
}
});
var classTable = Ext.create('Ext.grid.Panel', {
style: 'border: solid Blue 1px',
id: 'family',
renderTo: Ext.getBody(),
store: store,
requires: [
'Ext.ux.exporter.Exporter'
],
columns: columnList,
columnLines: true,
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
},
dockedItems:[
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'exporterbutton',
text: 'export data'
}
]
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>

repository link use this project
here is example how to use it fiddle link
first of all copy repository files to you ext library's ux folder located in ext/src/ux under exporter folder. full path will be ext/src/ux/exporter/[repository_files]
and modify your grid
var classTable = Ext.create('Ext.grid.Panel', {
style: 'border: solid Blue 1px',
id: 'family',
renderTo: Ext.getBody(),
store: store,
requires: [
'Ext.ux.exporter.Exporter'
],
columns: columnList,
columnLines: true,
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
},
dockedItems:[
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'exporterbutton',
text: 'exrpot data'
}
]
}
]
});

How to apply style on column of jqxDatatable

I am newbie to JqWidget world. I have table in which I want one column values to be displayed as bold. I don`t how apply css on column

You can use the cellClassName column property.
To learn how, please see:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>The sample illustrates how to add custom CSS styles to DataTable cells under specific conditions.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = "../sampledata/products.xml";
// prepare the data
var source =
{
dataType: "xml",
dataFields: [
{ name: 'ProductName', type: 'string' },
{ name: 'QuantityPerUnit', type: 'int' },
{ name: 'UnitPrice', type: 'float' },
{ name: 'UnitsInStock', type: 'float' },
{ name: 'Discontinued', type: 'bool' }
],
root: "Products",
record: "Product",
id: 'ProductID',
url: url
};
var cellClass = function (row, dataField, cellText, rowData) {
var cellValue = rowData[dataField];
switch (dataField) {
case "QuantityPerUnit":
if (cellValue < 11) {
return "min";
}
if (cellValue < 14) {
return "minavg";
}
if (cellValue < 50) {
return "avg";
}
return "max";
case "UnitPrice":
if (cellValue < 20) {
return "min";
}
if (cellValue < 30) {
return "minavg";
}
if (cellValue < 50) {
return "avg";
}
return "max";
case "UnitsInStock":
if (cellValue < 20) {
return "min";
}
if (cellValue < 30) {
return "minavg";
}
if (cellValue < 50) {
return "avg";
}
return "max";
}
}
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
// initialize jqxDataTable
$("#dataTable").jqxDataTable(
{
source: dataAdapter,
pageable: true,
sortable: true,
altRows: true,
selectionMode: 'none',
enableHover: false,
columns: [
{ text: 'Product Name', dataField: 'ProductName', width: 200 },
{ text: 'Quantity per Unit', dataField: 'QuantityPerUnit', cellClassName: cellClass, cellsAlign: 'right', align: 'right', width: 200 },
{ text: 'Unit Price', dataField: 'UnitPrice', align: 'right', cellClassName: cellClass, cellsAlign: 'right', cellsformat: 'c2', width: 200 },
{ text: 'Units In Stock', dataField: 'UnitsInStock', cellsAlign: 'right', width: 250, align: 'right', cellClassName: cellClass}
]
});
});
</script>
</head>
<body class='default'>
<style>
.max {
color: black\9;
background-color: #63be7b\9;
}
.avg {
color: black\9;
background-color: #f8e984\9;
}
.minavg {
color: black\9;
background-color: #f9806f\9;
}
.min {
color: black\9;
background-color: #f8696b\9;
}
.max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .max:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #63be7b;
}
.avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .avg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #f8e984;
}
.minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .minavg:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #f9806f;
}
.min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .min:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
color: black;
background-color: #f8696b;
}
</style>
<div id="dataTable">
</div>
</body>
</html>
Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?arctic

I agree with the answer of Scripto here. Another way of doing this is, add a cellsrenderer function to the column definition.
For example:
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
var theStatus = $("#jqxgrid").jqxGrid('getrowdata', row).StatusID;
if (theStatus == 0) {
return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #ff0000;font-weight: bold">' + value + '</span>';
}
else if (theStatus == 2) {
return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #006638;font-weight: bold">' + value + '</span>';
}
else if (theStatus == 3) {
return '<span style="margin: 4px;float: ' + columnproperties.cellsalign + ';color: #9B30FF;font-weight: bold">' + value + '</span>';
}
};
So our column definition will be something like below.
columns: [ { text: 'Number', datafield: 'InvoiceNumber', width: 50, cellsalign: 'right', cellsrenderer: cellsrenderer }]
I hope this helps.

dojo enhanced grid filter - programatically set column A greater than some number

I'm trying to set a filter on a dojo grid programatically so that some column be greater than some number.
I have a quantity column and I wish to set a filter so that quantity be greater (or different) than zero.
Thanks!
So the code would look like this:
dojo.require("dojox.grid.EnhancedGrid");
var storage = new dojo.data.ItemFileWriteStore({data: data});
var layout = [ { field: 'id', name: '# ID', width: '60px' },
{ field: 'name', name: 'Nume produs', width: '200px' },
{ field: 'qty', name: 'QTY', alwaysEditing: true, editable: true }
];
var grid = new dojox.grid.EnhancedGrid({
store: storage,
structure: layout,
plugins: { filter : true },
}, 'grid');
grid.startup();
I'm guessing I should do a filter or a query but I really don't know how to compare two things, the only thing I found out is that I can use a query with RegEx but.. that's all

Doing
var grid = new dojox.grid.EnhancedGrid({
query: { 'qty' : new RegExp('^[1-9]+[0-9]*$') },
store: storage,
structure: layout,
plugins: { filter : true },
}, 'grid');
works but I believe it's rather inefficient and I hoped for a nicer, cleaner, faster solution.

Here's how I ended up doing something similar:
The basic idea is to add an invisible column. When the value you want to test meets your criteria (greater than some value, or in my case within some range) then set the invisible column to 'Y', otherwise set it to 'N'. Then the filter is easy: invisibleColumn: 'Y'.
The following displays a grid with Column_B values between 100-500. Click the button to activate a filter to display only values between 150-350. It is a complete working example in three parts (javascript, HTML, CSS):
The JavaScript (script.js)
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.ready(function(){
var appLayout = new dijit.layout.ContentPane({
id: "appLayout"
}, "appLayout");
var data = {
'items': [
{'Column_A': 'alpha', 'Column_B': 100},
{'Column_A': 'beta', 'Column_B': 200},
{'Column_A': 'gamma', 'Column_B': 300},
{'Column_A': 'delta', 'Column_B': 400},
{'Column_A': 'epsilon', 'Column_B': 500}
]
};
var store = new dojo.data.ItemFileReadStore({
data: data
});
var layout = [[
{name : 'A', field : 'Column_A', width : '125px'},
{name : 'B', field : 'Column_B', width : '125px%'}
]];
var grid = new dojox.grid.DataGrid({
structure : layout,
store: store,
queryOptions: {ignoreCase: true}
});
var filterButton = new dijit.form.Button({
label: "Filter",
onClick: function () {
var determineRange = function (items, request) {
for (var i = 0; i < items.length; ++i) {
items[i].invisibleColumn = (items[i].Column_B > 150 && items[i].Column_B < 350) ? 'Y' : 'N';
}
grid.filter({invisibleColumn: 'Y'});
};
store.fetch({onComplete: determineRange});
}
});
filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);
appLayout.startup();
});
The html (index.html)
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filter by range</title>
<link rel="stylesheet" href="style.css" media="screen"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/document.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/layout/resources/ExpandoPane.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="claro">
<div id="appLayout"></div>
</body>
</html>
And finally the CSS (style.css)
html, body {
width: 100%; height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
#appLayout {
width 100%; height: 100%;
}