Custom background color on selected cells - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: conditional formatting, CSS class, selected cells

This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 10 months ago.

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

Author

Custom background color on selected cells Posts

August 17, 2013 at 9:47 pm Custom background color on selected cells #27041

Participant

Hi. I am drawing a grid and applying conditional background colors using a cellstyle renderer. This all works great.

my problem is when i select multiple cells, the selected cells background color does show in the cells where custom bacground colors have been applied. This makes it look as if those cells have not been selected, even though they have.

Can anyone please post a code snippet to resolve this? I was thinking I could use jquery to loop over all selected cells and apply a “selection” class to the selected cells. But i dont know how to do this.

any help greatly appreciated.

Fritz

August 17, 2013 at 10:07 pm Custom background color on selected cells #27045

Peter Stoev

Keymaster

Hi Fritz,

The problem here according to me is that you may define your custom CSS styles in such way that they will be with highest priority.

Here’s a sample which shows how to use custom CSS styles with jqxGrid – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?web. The demo is with multiple selection, but the selection classes are with highest priority. Another option is to just define the selection classes in the theme with !important.

Best Regards,
Peter Stoev

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

August 18, 2013 at 12:41 am Custom background color on selected cells #27047

Fritz45

Participant

Thanks Peter for the prompt response. Yes, the link you posted shows the behaviour I need. Now I just need to figure out how to do it!

I am referencing jqx.base.css and then jqx.bootstrap.css. I tried to follow your suggestion by modifying class .jqx-grid-cell-selected-bootstrap by adding !important to the the following properties:

background-color: #003399 !important;
*background-color: #003399 !important;

But this does not seem to have any effect. Apologies if I am doing the wrong thing – I am not expert with CSS.

My custom cell rendering looks something like this:

var cellclass = function (row, columnfield, value) {
value = Number(value);
if (value > 10) {
return “warning”;
}
}

the class “warning” looks like this:

.warning
{
background-color:lightsalmon;
}

(note that there is no “!important;” on this class)

and I build the columns array using this code in a for loop:

cols.push({ text: year, datafield: “yr” + year, width: 50, cellsalign: ‘center’, cellclassname: cellclass });

As I noted, it all works well except for the selected cell background on custom formatted cells.

Any help greatly appreciated.

Kind Regards,

Fritz

August 18, 2013 at 10:40 am Custom background color on selected cells #27056

Peter Stoev

Keymaster

Hi Fritz,

So, if you use use bootstrap, look at the sample I posted: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?bootstrap. Your custom CSS Class should be defined after the reference to jqx.bootstrap.css.

Also an option is to add your custom CSS class inside the jqx.bootstrap.css before the .jqx-grid-cell-selected-bootstrap so the priority of your custom CSS class would be lower when applied.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 18, 2013 at 11:05 am Custom background color on selected cells #27057

Peter Stoev

Keymaster

Hi Fritz,

One more idea popped up in my mind and it seems to be easier:

Take a look at the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The sample illustrates how to add custom CSS styles to Grid cells under specific conditions.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellclass = function (row, columnfield, value) {
                if (value < 20) {
                    return 'red';
                }
                else if (value >= 20 && value < 50) {
                    return 'yellow';
                }
                else return 'green';
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellclassname: cellclass, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
        });
    </script>
</head>
<body class='default'>
       <style>
        .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #b6ff00;
        }
        .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: yellow;
        }
        .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #e83636;
        }
    </style>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

The custom CSS classes are applied only if the element is not hovered and is not selected.

Best Regards,
Peter Stoev

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

August 18, 2013 at 9:59 pm Custom background color on selected cells #27075

Fritz45

Participant

Hi Peter. Thanks for your persistence in helping me solve this problem.

Your last solution did not work for me. Whenever I added the “:not(…)” part to my style, the conditional formatting did not show anymore. This was the case no matter where I put the style (in body, in header or in jqx-bootstrap.css file).

I also tried your second last solution, which was to put the custom formatting style (.warning) inside the jqx-bootstrap.css file. This also did not work (the conditional format style showed, but was not overriden by the selected style when cells were selected).

However, THE PROBLEM WAS SOLVED when I put the custom formatting style in “jqx-base.css” right before style:

/*applied to a selected grid cell.*/
.jqx-grid-cell-selected {
border-left: 0px solid transparent;
}

So the final solution, in the jqx-base.css file, looked like this:

.myConditionalStyle
{
color: black;
background-color: yellow;
}

/*applied to a selected grid cell.*/
.jqx-grid-cell-selected {
border-left: 0px solid transparent;
}

I hope this can be of help to someone else. Thanks again for your help.

Kind Regards,

Fritz

August 19, 2013 at 4:46 am Custom background color on selected cells #27078

Peter Stoev

Keymaster

Hi Fritz,

How do you load the Bootstrap Theme in your page?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 19, 2013 at 6:23 am Custom background color on selected cells #27096

Fritz45

Participant

Hi Peter.

I load the reference to the jqx-bootstrap.css file into the head section of the page, right after the jqx-core.css reference. I think injust copied this from examples in your documentation. Both these css references come only after the bootstap framework’s css files. Is that not right?

Kind regards,

Fritz

August 19, 2013 at 9:52 am Custom background color on selected cells #27120

Peter Stoev

Keymaster

Hi Fritz,

That is fine, jqx.bootstrap.css should be after jqx.base.css. We also updated our online demo which now uses the approach I suggested you earlier: gridcellclass.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.