Row Classes

[alanlindsay]

Hi,

What is the 2.0 replacement for:

rowCssClasses: function(item) { }

I can't figure out a clean way to colorize rows based on a value from
the one of the cells in that row. This is something that needs to
happen automatically on every render.

Any help is greatly appreciated.

[Michael Leibman]

Have the data source provide "getItemMetadata(index)":

myData.getItemMetadata = function(index) {

  if (index === <my_row_number>) {

    return {

      cssClass: "myRowCssClass"  // specify additional CSS class for a specific row

    };

[alanlindsay]

Thanks!

Alan

[alanlindsay]

Sorry to be so ignorant. This isn't working for me:

myDataView.getItemMetadata = function(index)
{
var item = myDataView.getItemByIdx(index);

return {
cssClass: item.Severity.toLowerCase()
}
};

It actually doesn't matter what I use as the value of cssClass,
nothing gets applied to either the row or the cell. What am I missing
here?

Alan

[Michael Leibman]

My apologies, it needs to be "cssClasses" (plural).

[Michael Leibman]

There is also an example page that I haven't linked on the wiki yet - 
example-colspan.html

[alanlindsay]

Thanks, works perfectly now!

Alan

On Mar 8, 11:30 pm, Michael Leibman <michael.leib...@gmail.com> wrote:
> There is also an example page that I haven't linked on the wiki yet -
> example-colspan.html
>
> On Tue, Mar 8, 2011 at 11:22 PM, Michael Leibman

> <michael.leib...@gmail.com>wrote:

>
>
>
>
>
>
>
> > My apologies, it needs to be "cssClasses" (plural).
>

[alanlindsay]

P.S. Congrats on your new Google job!

Alan

On Mar 8, 11:30 pm, Michael Leibman <michael.leib...@gmail.com> wrote:
> There is also an example page that I haven't linked on the wiki yet -
> example-colspan.html
>
> On Tue, Mar 8, 2011 at 11:22 PM, Michael Leibman

> <michael.leib...@gmail.com>wrote:

>
>
>
>
>
>
>
> > My apologies, it needs to be "cssClasses" (plural).
>

[alanlindsay]

I got this working but its not (re)applying when I filter my data set.  The following code properly filters my results and displays them but doesn't apply the conditional css.  Instead it uses the css of the rows that were visible prior to filtering.  Good data, bad styles.

---------------------------

$('#search-box').keyup(function(e) 

        {

            self.searchString = this.value;

            self.dataView.refresh();

            self.sg.resizeCanvas();

        });

self.dataView.onRowsChanged.subscribe(function(e, args) 

    {

        self.sg.invalidateRows(args.rows);

        self.sg.render();

    

        if (self.selectedRowIds.length > 0)

        {

            // since how the original data maps onto rows has changed,

            // the selected rows in the grid need to be updated

            var selRows = [];

            for (var i = 0; i < self.selectedRowIds.length; i++)

            {

                var idx = self.dataView.getRowById(self.selectedRowIds[i]);

                if (idx != undefined)

                    selRows.push(idx);

            }

        

            self.sg.setSelectedRows(selRows);

        }

    });

[alanlindsay]

Sorry, forgot to list the filter:

self.dataView.getItemMetadata = function(index) 

    { 

        var item = self.dataView.getItemByIdx(index);

        

        return {

            cssClasses: item.Severity.toLowerCase()

        }

    };

[alanlindsay]

I should also mention that the css works perfectly when scrolling through the grid (prior to filtering).

[alanlindsay]

Ok, I was able to fix this by changing the getItemMetadata function:

self.dataView.getItemMetadata = function(index) 

    { 

        var item = self.sg.getDataItem(index);

        

        return {

            cssClasses: item.Severity.toLowerCase()

        }

    };

Instead of using dataView.getItemByIdx I had to use getDataItem.  Not sure why dataView.getItemByIdx is no longer working (it returns the wrong record).

[Curious]

Sorry to bump the thread, but I am unable to change the background
color of a given row using the above technique.

I have the following style:

<style type="text/css">
.slick-row.redrow {
background-color:#FF0000;
font-size:18px;
font-style: italic;
font-weight: bold;
}
</style>

and am using the code as follow:

data.getItemMetadata = function(index) {
if (index === 3) {
return {
cssClasses: "redrow" // specify additional CSS class for a
specific row
};
}}

When running the page, the 4th row's font is in bold and italic, but
the font-size is not 18px and the background color of the row is not
red.

Could you please let me know what I should change to alter a row's
background color and font-size?

Thanks in advance.

CC

[alanlindsay]

You have to add the style to the cell class as well.

.slick-row.redrow, .slick-row.redrow .slick-cell { 

background-color:#FF0000; 
font-size:18px; 
font-style: italic; 
font-weight: bold; 
} 

Alan

[Curious]

Thanks Alan!

The following style worked for me:

*.slick-row.redrow *.slick-cell {

[Robert Baindourov]

Hey guys,

I need to apply styles after we do a setData() and then render() call.
But the getItemMetadata doesn't get called again!