Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Single cell colorizing not working as expected

See original GitHub issue

I’m submitting a … [X] very big thank you for this fantastic toolkit. Superb. [x ] bug report [x] feature request [ ] question about the decisions made in the repository
What is the current behavior?

Not working as expected.

Coloring a single cell using a render() function does not style the whole height of the row, simply the div it contains. Based on http://w2ui.com/web/demos/#!grid/grid-23

// the problem here is that it is not the TD that gets styled but the internal div ... 
// A complete HTML/JS example is listed below
render: function (record, index, column_index) {
    var html = '<div style="background-color:#7F7F7F;">'+ record.email + '</div>';
    return html;
}

The second possible solution is suggested on here: https://stackoverflow.com/questions/38696758/add-custom-color-to-w2ui-cell-grid

// suggests the `1:` means style is applied to column 1 only?
w2ui: { style: "1: background-color:red; color:blue;" },

If the current behavior is a bug, please provide the steps to reproduce and if possible a screenshots.

w2ui-cell-color

The .JS used to generate the screen shot:

<html>
<head>
    <title>W2UI Demo: grid-1</title>
    <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>
    <script type=text/javascript src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>

<div id="grid" style="width: 50%; height: 350px;"></div>

<script type="text/javascript">
$(function () {
    $('#grid').w2grid({ 
        name: 'grid', 
        method: 'GET', // need this to avoid 412 error on Safari
        columns: [                
            { field: 'fname', text: 'First Name', size: '30%' },
            { field: 'lname', text: 'Last Name', size: '30%' },
            { field: 'email', text: 'Email', size: '40%',
                // based on http://w2ui.com/web/demos/#!grid/grid-23
                // the problem here is that it is not the TD that gets styled
                // but the internal div ... 
                render: function (record, index, column_index) {
                    var html = '<div style="background-color:#7F7F7F;">'+ record.email + '</div>';
                    return html;
                } 
            },
            { field: 'sdate', text: 'Start Date', size: '120px' }
        ],
        records: [
        { recid: 1, 
            // default styling for reference
            fname: "John", lname: "Doe", email: "jdoe@gmail.com", sdate: "4/3/2012"
        },
        { recid: 2, 
            // based on http://w2ui.com/web/demos/#!grid/grid-2
            // this works. entire row is blue text on red
            w2ui: { style: "background-color:red; color:blue;" },
            // https://stackoverflow.com/questions/38696758/add-custom-color-to-w2ui-cell-grid
            // suggests the `1:` means style is applied to column 1 only?
            // w2ui: { style: "1: background-color:red; color:blue;" },
            fname: "John", lname: "Two", email: "j2@gmail.com", sdate: "4/3/2012"
        },
        ]
    });    
});
</script>
</body>
</html>

What is the expected behavior?

Ideally the cell would be colored on its own as specified.

Issue Analytics

State:
Created 4 years ago
Comments:8

Top GitHub Comments

1reaction

sturan2commented, May 28, 2019

Hi @g40, you can try the following code:

w2ui: {style: {0: ‘background-color: yellow; color: black;’,1: ‘background-color: grey; color: black;’}

https://codepen.io/anon/pen/EzpRWz

0reactions

mpf82commented, May 28, 2019

Sure, documentation and additional demos are always welcome =)

Hopefully @vitmalina and @mrg2001 find the time to look through the active PRs.

By the way, feel free to close this issue if your initial question has been answered.

Top Results From Across the Web

Table Cell Shading – White Space – Troubleshooting

Do you see white space in table cells in Word that should be filled with color? This article explains what can cause this...

Poor Cell Growth Troubleshooting - Sigma-Aldrich

Problem/Cause, Solution. No or few viable cells after thawing from stock. Stock culture was of poor quality, Ensure starting culture used to generate...

Conditional formatting compatibility issues - Microsoft Support

One or more cells in this workbook contain a conditional formatting type that is not supported in earlier versions of Excel, such as...

Changing Cell Color without changing color in other cells ...

If I call the renderer the first time it is working... But if I then want to change another cell color I am...

dtm2451/dittoSeq: Color blindness friendly ... - GitHub

A set of functions built to enable analysis and visualization of single-cell and bulk RNA-sequencing data by novice, experienced, and color blind coders....