Cell margins don't show on right and bottom

[msalvatoreParticipant]

Hello,

I am trying to have alternating rows different colors in my jqxGrid. Altrows is not giving us the result we want.

When using the cellsrenderer, it only shows the left and top margins as shown here: http://imgur.com/0k08rta

When the margins are removed, there is no border highlight when the mouse hovers over the cell. Here is the code I’m using:

var cellsrenderer = function (row, column, value, defaultHtml) {
    if (row % 2 == 0) {
        var element = $(defaultHtml);
        element.css({ 'background-color': '#669EDE', 'width': '100%', 'height': '100%', 'margin': '5px' });
        return element[0].outerHTML;
    }
    else {
        var element = $(defaultHtml);
        element.css({ 'background-color': 'white', 'width': '100%', 'height': '100%', 'margin': '5px'});
        return element[0].outerHTML;
    }

    return defaultHtml;
}

Also, I tried using the cellclass to do this, but I’m unable to get the row index:

var cellclass = function (rowindex, columnfield, value) {
    if (rowindex %2 != 2) {
        return 'blue';
    }
    else return 'white';
}

Thanks!

[DimitarParticipant]

Hello msalvatore,

Please try the following:

var cellsrenderer = function (row, column, value, defaultHtml) {
    if (row % 2 == 0) {
        var element = $(defaultHtml);
        element.css({ 'background-color': '#669EDE', 'margin': '5px', 'padding-bottom': '0px' });
        return element[0].outerHTML;
    }
    else {
        var element = $(defaultHtml);
        element.css({ 'background-color': 'white', 'margin': '5px', 'padding-bottom': '0px' });
        return element[0].outerHTML;
    }

    return defaultHtml;
}

As for the cellclassname callback function, it correctly gets the row index. Please check out the demo Cells Styling.

Best Regards,
Dimitar

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

[msalvatoreParticipant]

Thanks!

[Author]

Posts