[ 4 posts ]

Bhuvana Pathsamatla

  • Username: Bhuvana
  • Joined: Mon Jun 18, 2012 2:09 am
  • Posts: 15
  • Location: India
  • IRC: Bhuvana
  • Offline
  • Profile

Row formatter for YUI3 datatable

Post Posted: Sun Jun 24, 2012 11:18 pm
+0-
I am using YUI3(3.5.1) datatable and loading data using a datasource. I need a way to change the background color of rows based on the values of one of the columns. I tried setting row formatter using formatRow: customRowFormatter but this doesnt seem to work in YUI3. the function customRowFormatter is never getting invoked. If I need to use column formatter for this purpose I would like to know the way to access the row corresponding to that cell.

Can someone help me with this?

John Lindal

YUI Contributor

  • Username: jafl
  • Joined: Mon Nov 02, 2009 2:33 pm
  • Posts: 352
  • Location: Los Angeles, CA
  • Twitter: jafl5272
  • GitHub: jafl
  • Gists: jafl
  • Offline
  • Profile

Re: Row formatter for YUI3 datatable

Post Posted: Mon Jun 25, 2012 10:12 am
+0-
Custom formatters can modify the rowClass element:

http://yuilibrary.com/yui/docs/api/clas ... yView.html

Bhuvana Pathsamatla

  • Username: Bhuvana
  • Joined: Mon Jun 18, 2012 2:09 am
  • Posts: 15
  • Location: India
  • IRC: Bhuvana
  • Offline
  • Profile

Re: Row formatter for YUI3 datatable

Post Posted: Fri Jun 29, 2012 2:31 am
+0-
Hi,

Thanks for the response. I am trying to set the background color for the row by adding a new class to the row. I have done it by appending the new class to rowClass in the formatter. However I am unable to overwrite the background color set by the YUI 3 css. When I debug I can see that the following css is getting higher precedence.

.yui3-skin-sam .yui3-datatable-odd .yui3-datatable-cell {
background-color: rgb(237, 245, 255);
}

Here is my custom class I am setting to the row.
.custom-row-class {
background-color: rgb(255, 255, 255);
}

I also tried setting the background color using the heirarchy:

.yui3-skin-sam .custom-row-class .yui3-datatable-cell {
font-family: sans-serif;
font-weight: normal;
font-size: 14px;
background-color: rgb(255, 255, 255);
}

Is there any way I can override the background-color.

Kris Kelly

  • Username: krisheehaw
  • Joined: Mon Oct 05, 2009 7:23 am
  • Posts: 15
  • Offline
  • Profile

Re: Row formatter for YUI3 datatable

Post Posted: Fri Jun 29, 2012 4:10 am
+0-
You need to increase the specificity of your selector so that it overrides the YUI one
Code:
.yui3-skin-sam .yui3-datatable-odd .yui3-datatable-cell .my-custom-class {
background-color: #f00;
}
  [ 4 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum