Forums

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile

DataTable row color change depending on a certain condition

Post Posted: Tue Jul 03, 2012 4:42 am
+0-
Hi All,

I have a DataTable which has some columns one of which is a HTML drop down menu with two options "Yes" and "No". The requirement is to change the color of the row depending on the value for that particular row's drop-down menu value. Say for example if the option selected for a particular row is "Yes" then the color for that particular should change to say Red and if the value selected is "No" the color for that particular row should change to blue. How can this be done? Can anyone help me?

Thanks,
Rohit

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 617
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile
Tags:

Re: DataTable row color change depending on a certain condit

Post Posted: Tue Jul 03, 2012 6:28 am
+0-
First idea that comes to mind is:

- Add a class to the row depending on the value. You can do this with a formatter:
Code:
columns: [{
  formatter: function (o) {
    o.rowClass = o.value == 'foo' ? 'rowFoo' : 'rowBar';
  }
}]

- Add a class to the whole table when the dropdown menu is clicked. So you'll end up with a combination of classes:
Code:
.yes .rowFoo {
  background: red;
}
.no .rowFoo {
  background: blue;
}
.yes .rowBar {}
.no .rowBar {}

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile
Tags:

Re: DataTable row color change depending on a certain condit

Post Posted: Tue Jul 03, 2012 11:09 pm
+0-
Hi Juan,

Thanks for the reply!!! The question i have now is i already have one formatter defined for the drop down menu like this:

formatter: '<input type="drop-down list"/>',emptyCellValue: '<label for="field-3"></label><select id="field-3" name="field-3"><option value="1" >Yes</option><option value="2" >No</option></select>'

Would it be possible to define the formatter you have given here on the formatter that i have already defined ?

Thanks again,
Rohit

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 617
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile
Tags:

Re: DataTable row color change depending on a certain condit

Post Posted: Wed Jul 04, 2012 5:19 am
+0-
Oh! I thought you had a select box only at the top of the table. In this case I'd recommend you to use a checkbox instead of a select box. It's a lot faster and easier on the eye.

You defined your formatter as a string. So in order to add a class name to the row all you have to do is change it to a function which returns the string:
Code:
formatter: function (o) {
  o.rowClass = o.value == 'foo' ? 'rowFoo' : 'rowBar';
  return '<input type="checkbox"> ...';
}

jack.wang

  • Username: cexus
  • Joined: Thu Nov 01, 2012 3:17 am
  • Posts: 9
  • Offline
  • Profile

Re: DataTable row color change depending on a certain condit

Post Posted: Mon Nov 05, 2012 12:52 am
+0-
Hi Juan, I defined the formatter but it seems does not work, the cell's background color is not red,Why?

Code:
formatter:function(o){
     o.className='alarm1';
}


Code:
<STYLE type="text/css">
.alarm1{
  background-color:red;
  text-align: center;
  border:0px;
}
</STYLE>


But this can work
Code:
nodeFormatter: function (o) {
o.td.setAttribute('class','alarm1');
}


Thanks
Jack

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 617
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile
Tags:

Re: DataTable row color change depending on a certain condit

Post Posted: Mon Nov 05, 2012 4:45 am
+0-
You just need to be more specific in your CSS selector. Check out this example: http://jsfiddle.net/juandopazo/6hURd/
Page 1 of 1   [ 6 posts ]
New Topic | Post Reply | Print view
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

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group