jQWidgets Forums

Tagged: column, datafields, grid, jqxgrid

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

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

Author

Custom Column header CSS style Posts

February 1, 2015 at 2:41 am 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!

February 2, 2015 at 10:24 am 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/

February 2, 2015 at 11:08 am 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/

February 2, 2015 at 2:50 pm Custom Column header CSS style #66326

yuanru

Participant

Hi Nadezhda,

Thanks for the solution.

Author

Posts

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

You must be logged in to reply to this topic.