jQuery UI Widgets › Forums › Grid › Change row color based on condition
Tagged: background color, cellclassname, grid, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by Debashis 9 years, 11 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hi,
How can I change back ground color of complete row based on some condition in Grid?
Hello Debashis,
The following example shows how to add background color for entire rows based on condition.
<!DOCTYPE html> <html lang="en"> <head> <title'></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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <style> .yellowCell { background-color: yellow; } </style> <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 cellclassname = function (row, column, value, data) { var val = $('#jqxgrid').jqxGrid('getcellvalue', row, "QuantityPerUnit"); if (val <= 20) { return "yellowCell"; } } var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, autoheight: true, sortable: true, altrows: true, pageSize: 10, autoHeight: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, cellclassname: cellclassname }, { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200, cellclassname: cellclassname }, { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200, cellclassname: cellclassname }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100, cellclassname: cellclassname }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellclassname: cellclassname } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Its working perfectly. Thanks a ton!
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.