jQuery UI Widgets › Forums › Grid › Group level backgroud color

Tagged: , , , , , , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Group level backgroud color Posts
  • June 8, 2015 at 10:24 am 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

    June 8, 2015 at 12:04 pm 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/

    June 8, 2015 at 2:55 pm 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

    June 9, 2015 at 4:40 am 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/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.