jQWidgets Forums
jQuery UI Widgets › Forums › Grid › highligh entire row based on condition
Tagged: grid, highlight row not cell, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by antrax13 8 years, 2 months ago.
-
Author
-
Hi again,
I know how to highligh cell but how to highlight entire row based on value.
$(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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 }, { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' } ], columngroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' } ] }); });
How to highlight (apply css style) row if QuantityPerUnit > 5?
Hi antrax13,
Add cellsrenderer to all columns so highlight all cells in a GRID row.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter it works like a charm.
Just in case someone will need it here is the code:
var cellclassname = function (row, columnfield, value, rowdata) { if(rowdata.isInTechnique == false){ return 'red'; } }
{text: 'id', datafield: 'id', hidden: true}, {text: firstLevelLabel, datafield: 'firsttag', width: 150, filterable: false, cellclassname: cellclassname}, {text: 'Has Technique?', datafield: 'isInTechnique', width: 150, filtertype: 'checkedlist', cellclassname: cellclassname}
each field/cell got cellclassname and based on isInTechnique field I will highlight all cells for that row.
Thanks
-
AuthorPosts
You must be logged in to reply to this topic.