Background Color Row

[simcon94Participant]

Hi,
i have a Grid. Now i want to set the Row Background Color.
My columns will be created dynamically, so i can’t set an cellrender to columns.

,columns: 
                    @Html.Raw(ExpandoObjectExtensions.ToJson(Model.ResultTable, true))

I tried with loadComplete in dataAdapter:
something like this:
$("#grid").jqxGrid('setrowdetails', 5, "<div style='background-color:#efefef;'></div>", 100, true);

How can i set the Row Color?
What is the best way, without cellsrender……

[Peter StoevKeymaster]

Hi simcon94,

You can set a different background color of a row only through cellsrenderer or cellclassname callback functions. For cellsrenderer implementation, please look at the first sample of jqxGrid. A cellclassname callback implementation is available here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?arctic

Best Regards,
Peter Stoev

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

[simcon94Participant]

Ok. Thanks.
And how can i set the color of the whole row?

[simcon94Participant]

I can’t set the row with the ID. The Problem is the scrolling….

[simcon94Participant]

var productID = dataAdapter.records[row].uid;
coloredRow = "#row" + productID + "grid";
$(coloredRow).children().css( "background-color", "#6293BB" );

That works. But when i scroll the grid, the coloredRow is moving

Nobody any idea?

[Peter StoevKeymaster]

Hi simcon94,

As I wrote in the previous post, you will have to use the callback functions for styling cells. To style entire row, set the cellsrenderer or cellsclassname property of all columns to point to a function.

Best Regards,
Peter Stoev

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

[simcon94Participant]

i used the callback functions:

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
            var coloredRow = "";
            coloredRow = "#row" + row + "grid";
            $(coloredRow).children().css( "background-color", "#6293BB" );
            
        }

[Peter StoevKeymaster]

Hi simcon94,

cellsrenderer should return HTML string. In the provided code, it does not.

Best Regards,
Peter Stoev

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

[simcon94Participant]

example?

[Peter StoevKeymaster]

Hi simcon94,

There’s a help topic about using the “cellsrenderer” and as I already wrote – the first sample of jqxGrid uses “cellsrenderer”, too.

Best Regards,
Peter Stoev

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

[simcon94Participant]

I know. But the example didn’t render the whole row. Only the Cell..
And i want to render the whole row….

[Peter StoevKeymaster]

Hi simcon94,

Each column can have a “cellsrenderer” which means that when you render all cells in each column, the result would be custom rendered row.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[simcon94Participant]

But this isn’t a nice solution. Becuase the grid is dynamically, so i didn’t know the cells content….

[philipstratfordParticipant]

I know this is an old post, but the question was never answered, and it’s a problem. Based on the value of a single cell, I want to be able to set the background color of the entire row.

The cellclassname function works great for styling the cell where the value in question is rendered, but cannot be used to style the whole row.

The cellsrenderer function does not allow for a class to simply be applied to the cell. I can use it to create a span INSIDE the cell and style that, as shown in the first sample on the jqxGrid demo page, and that would be fine if I wanted to style just the text, but it doesn’t work if you want to set the background color for the entire cell. If I use the cellsrenderer function to return a string like: “<span class=’bg-danger’>” + value + “</span>”, the TEXT ITSELF has a red background, as per my CSS class, but the cell does not, which looks terrible.

Is there actually a way to set the background color of a grid’s row based on the value of a single cell, or is it impossible with jqxGrid?

[Peter StoevKeymaster]

Hi philipstratford,

cellclassname can be used to style entire Grid row if it is set to all cells within a row. It is much more flexible to be able to do it for specific cell and entire row than just style this Grid row. Just implement cellclassname for all Grid columns.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts