jQWidgets Forums

Tagged: background color, Cell, cellclassname, cellclick, click, color, css, grid, jqxgrid, row, style

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 1 month ago.

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

Author

selection mode checkbox & color row on click of cell Posts

March 7, 2015 at 7:44 pm selection mode checkbox & color row on click of cell #68165

Participant

Hi,

I wish to use the checkbox selection mode and prevent the rows from being colored when the checkbox is checked.
I saw this is done by using CSS –
#mygrid.jqx-grid-cell-selected {
background:none;
}
#mygrid .jqx-grid-cell-selected-web {
background:none;
}

Now I would like in $(“#mygrid “).on(“cellclick”, function (event) …
to apply CSS for coloring only this specific row that the cell was clicked on now (also removing the color from previous rows).
How would I implement this?

Thanks

March 9, 2015 at 7:08 am selection mode checkbox & color row on click of cell #68179

Dimitar

Participant

Hi assaf.frank123,

Here is an example using cellclassname. 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" />
    <style type="text/css">
        .green
        {
            background-color: Green;
            color: White;
        }
    </style>
    <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 firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            var clickedRow;

            var cellclass = function (row, columnfield, value) {
                if (clickedRow == row) {
                    return "green";
                }
            }

            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100, cellclassname: cellclass },
                  { text: 'Last Name', datafield: 'lastname', width: 100, cellclassname: cellclass },
                  { text: 'Product', datafield: 'productname', width: 180, cellclassname: cellclass },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellclassname: cellclass },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellclassname: cellclass },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellclassname: cellclass }
                ]
            });

            $("#jqxgrid").on("cellclick", function (event) {
                var rowBoundIndex = event.args.rowindex;
                clickedRow = rowBoundIndex;
                $("#jqxgrid").jqxGrid('refresh');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 9, 2015 at 8:34 am selection mode checkbox & color row on click of cell #68190

assaf.frank123

Participant

Thank you.
This colored the current row upon click.

Now I am trying to override the cell over and cell selected classes (for the row that is green now I wish that when the selection checkbox is clicked – the color will not change from the green I gave and nor should the color change upon hover). The css below caused it to be white upon hover or checbox selection..) How would I implement this?

Thanks.

#myGrid .jqx-grid-cell-selected {
background:transparent;
background-color: transparent;
}
#myGrid .jqx-grid-cell-selected-web {
background:transparent;
background-color: transparent;
}
#myGrid .jqx-grid-cell-hover {
background:transparent;
background-color: transparent;
}
#myGrid .jqx-grid-cell-hover-web {
background:transparent;
background-color: transparent;
}

March 9, 2015 at 12:48 pm selection mode checkbox & color row on click of cell #68211

Dimitar

Participant

Hi assaf.frank123,

You can disable the hover effect by setting enablehover to false. To override your custom style for the green (clicked) row, add !important to its CSS. Here is a modification of our previous example with the new requirements implemented:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.web.css" type="text/css" />
    <style type="text/css">
        #myGrid .jqx-grid-cell-selected
        {
            background: transparent;
            background-color: transparent;
        }
        #myGrid .jqx-grid-cell-selected-web
        {
            background: transparent;
            background-color: transparent;
        }
        .green
        {
            background-color: Green !important;
            color: White !important;
        }
    </style>
    <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" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            var clickedRow;

            var cellclass = function (row, columnfield, value) {
                if (clickedRow == row) {
                    return "green";
                }
            }

            $("#myGrid").jqxGrid(
            {
                theme: 'web',
                source: dataAdapter,
                selectionmode: 'checkbox',
                enablehover: false,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100, cellclassname: cellclass },
                  { text: 'Last Name', datafield: 'lastname', width: 100, cellclassname: cellclass },
                  { text: 'Product', datafield: 'productname', width: 180, cellclassname: cellclass },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellclassname: cellclass },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellclassname: cellclass },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellclassname: cellclass }
                ]
            });

            $("#myGrid").on("cellclick", function (event) {
                var rowBoundIndex = event.args.rowindex;
                clickedRow = rowBoundIndex;
                $("#myGrid").jqxGrid('refresh');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="myGrid">
    </div>
</body>
</html>

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.