jQuery UI Widgets Forums Grid Group level backgroud color

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Group level backgroud color #72148

    Pietro
    Participant

    Dear all,
    I have succesfully applied a background color via CSS to the group header rows.
    However I noticed this is applied to header rows at ALL levels.
    Is it maybe possible to apply different settings to different levels ?

    By exploring the html structure i don’t see any class or any structural difference so to distinguish an inner level from the outer, so i think CSS is not the right way.

    Is there eventually a different technique to render groups differently ?
    Thanks in advance.
    Pietro

    Group level backgroud color #72159

    Dimitar
    Participant

    Hello Pietro,

    Here is how to achieve your requirement using groupsrenderer:

    <!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: true,
                    showgroupmenuitems: true,
                    groupsrenderer: function (text, group, expanded, data) {
                        var color;
                        switch (data.level) {
                            case 0:
                                color = 'Blue';
                                break;
                            case 1:
                                color = 'Red';
                                break;
                            case 2:
                                color = 'Green';
                                break;
                        }
                        return '<div style="width: 100%; height: 100%; background-color: ' + color + '; 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/

    Group level backgroud color #72171

    Pietro
    Participant

    Amazing, thanks Dimitar!
    Is there a way, other than trial and errors, to understand the details of the data passed at the groupsrenderer function ?
    I’m referring to text, group, expanded, data…
    Thanks
    Pietro

    Group level backgroud color #72179

    Dimitar
    Participant

    Hi Pietro,

    You can see what is passed to the groupsrenderer callback function via debugging (in your IDE or your browser’s developer tools).

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.