jQuery UI Widgets Forums Grid Styling Group Headers differently than data rows

This topic contains 2 replies, has 2 voices, and was last updated by  aarffy 9 years, 9 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • aarffy
    Participant

    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?


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    aarffy
    Participant

    Thank you Dimitar. It is most helpful.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.