jQuery UI Widgets Forums Grid Custom Column header CSS style

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Custom Column header CSS style #66256

    yuanru
    Participant

    Hello,

    Is it possible to set different css styles on cells in the column header?
    For example: If there are two datafields in the column. They are (name, gender). I want to set the name column header’s background-color to be green while set the gender column header’s-background color to be red.

    Thanks!

    Custom Column header CSS style #66296

    Nadezhda
    Participant

    Hello yuanru,

    Unfortunately, it is not possible to use two datafields in the same column in jqxGrid.

    Best Regards,
    Nadezhda

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

    Custom Column header CSS style #66300

    Nadezhda
    Participant

    Hello yuanru,

    If you have two columns and want to set different background colors in column’s headers, please, find the following example:

    <!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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
                var names =
                [
                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
                var genders =
                [
                    "Male", "Female", "Female", "Female", "Male", "Male", "Male", "Male", "Male", "Male", "Female", "Male", "Male", "Male", "Female", "Female", "Male", "Male"
                ];
    
                for (var i = 0; i < 100; i++) {
                    var row = {};
                    row["name"] = names[Math.floor(Math.random() * names.length)];
                    row["gender"] = genders[Math.floor(Math.random() * genders.length)];
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
                $("#jqxgrid").jqxGrid(
                {
                    source: dataAdapter,
                    width: 300,
                    columns: [
                      { text: 'Names', datafield: 'name', width: 150 },
                      { text: 'Genders', datafield: 'gender', width: 150 }
                    ]
                });
                $("#columntablejqxgrid").children("div:eq(0)").css("background-color", "green");
                $("#columntablejqxgrid").children("div:eq(1)").css("background-color", "red");
            });
        </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,
    Nadezhda

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

    Custom Column header CSS style #66326

    yuanru
    Participant

    Hi Nadezhda,

    Thanks for the solution.

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

You must be logged in to reply to this topic.