jQuery UI Widgets › Forums › Grid › Styling Group Headers differently than data rows
Tagged: background, background color, color, grid, group, group header, grouping, groupsrenderer, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by aarffy 9 years, 9 months ago.
-
Author
-
I’m trying to make the group headers a different color than the rows in the group, but it seems they all have the same css class, jqx-grid-group-cell.
By group headers I mean each row in the grid with the the value of the group it preceeds, like…
Group Header Price = $1.00
——first member of the group
——second member
…
Group Header Price = $2.00
——first member of the group
——second member
…How can these group headers be styled differently from the members of the group?
Hello aarffy,
Please check out the following example. We hope it is helpful to you:
<!DOCTYPE html> <html lang="en"> <head> <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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/customers.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' }, { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' }, { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' }, { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' }, { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' }, { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:CustomerID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); // Create jqxGrid $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, groupable: true, closeablegroups: false, groupsexpandedbydefault: true, showgroupsheader: false, showgroupmenuitems: false, groupsrenderer: function (text, group, expanded, data) { return '<div style="width: 100%; height: 100%; background-color: Blue; color: White;">' + text + '</div>'; }, columns: [ { text: 'Company Name', datafield: 'CompanyName', width: 250 }, { text: 'City', datafield: 'City', width: 120 }, { text: 'Country', datafield: 'Country' } ], groups: ['City'] }); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar. It is most helpful.
-
AuthorPosts
You must be logged in to reply to this topic.