Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 10 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic

Michael Malak

  • Username: michaelmalak
  • Joined: Tue May 21, 2013 8:15 am
  • Posts: 6
  • Offline
  • Profile
Tags:
  • datatable
  • yui3
  • formatter

Simplified YUI3 Datatable cell formatting

Post Posted: Tue May 21, 2013 8:25 am
My blog post on a trick to embed cell styling directly with the data in a DataTable:

http://technicaltidbit.blogspot.com/201 ... -yui3.html

Juan Ignacio Dopazo

YUI Contributor

  • Offline
  • Profile
Tags:
  • datatable
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 4:19 am
I don't think DataTable formatters are weakly documented. The user guide covers them very well. In fact, when I read your post I thought your use of nodeFormatter was unnecessary, so I went to the user guide to check and indeed you can do it with a regular formatter like this:

Code:
function formatter(o) {
  if (o.value.classname) {
    o.className = o.value.classname;
  }

  return o.value.value;
}

This will set the classname to the one specified in the configuration without using a nodeFormatter which is much slower than a regular formatter.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile
Tags:
  • datatable
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 8:57 am
Actually, I added a column configuration specifically for this use case. In fact, Michael you were only a capitalized letter away!

See the "className" column configuration in the docs: http://yuilibrary.com/yui/docs/datatable/#column-config

With that, you don't need a formatter or nodeFormatter.

Sorry you think it's not well documented. Column formatting is a very rich feature often with a variety of ways to accomplish the same task. Maybe there should be an entirely separate guide or several more examples highlighting various formatting techniques.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 9:02 am
Oh! Correction. I misread your blog post. You're conditionally adding the classname. Gotcha. In that case, @juandopazo is right. The o.className property is what you want to use.

I'll note this on your blog, but the reason you want to avoid nodeFormatters is because it creates a Node instance per cell of the table. That dramatically slows down rendering performance and memory consumption as the number of rows and cells increase.

Michael Malak

  • Username: michaelmalak
  • Joined: Tue May 21, 2013 8:15 am
  • Posts: 6
  • Offline
  • Profile
Tags:
  • chrome
  • datatable
  • docs
  • safari
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 9:05 am
I do see now that docs give an example of setting classname in a formatter, but I'm not seeing the following code work in the two browsers I tried just now, Safari and Chrome:

Code:
<!DOCTYPE html>
<head>
 <script src="yui/build/yui/yui-min.js"></script>
 <script>
  var fmt = function(o) {
      if (o.value.classname)
          o.classname = o.value.classname;
      return o.value.value;
  }

  var columns = [{"key":"Part #", "formatter":fmt},
                 {"key":"Part Name", "formatter":fmt}];
  var data = [{"Part #":{"value":1234},
               "Part Name":{"value":"Capacitor"}},
              {"Part #":{"value":5678},
               "Part Name":{"value":"Resistor", "classname":"redbackground"}}];

  YUI().use('datatable', function(Y) {
   new Y.DataTable({columns: columns, data: data, render: "#table"});
  });
 </script>
 <style>
  .redbackground { background: red; }
 </style>
</head>
<body>
 <div id="table" class="yui3-skin-sam"></div>
</body>
</html>

Michael Malak

  • Username: michaelmalak
  • Joined: Tue May 21, 2013 8:15 am
  • Posts: 6
  • Offline
  • Profile
Tags:
  • datatable
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 1:01 pm
Actually, that should be
Code:
if (o.value.classname)
  o.className = o.value.classname;
return o.value.value;

(i.e. with a capital 'N' for the YUI field)
But that didn't work either.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile
Tags:
  • css
  • datatable
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Wed May 22, 2013 2:05 pm
Chances are it was actually working, but the expected css wasn't applying because the specificity of the redbackground rule wasn't high enough to beat DataTable's row striping css.

See http://jsbin.com/ukonew/1/edit

Michael Malak

  • Username: michaelmalak
  • Joined: Tue May 21, 2013 8:15 am
  • Posts: 6
  • Offline
  • Profile
Tags:
  • css
  • datatable
  • selector
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Thu May 23, 2013 7:31 am
The specific CSS selector isn't working for me in a real browser, but you're definitely on the right track, because I was able to get the sledgehammer to work:
Code:
.redbackground { background: red !important; }

Unless you can figure out a specific, working CSS selector, I'll post to my blog (and link back here) the combination of formatter and !important as being the more performant solution.

Michael Malak

  • Username: michaelmalak
  • Joined: Tue May 21, 2013 8:15 am
  • Posts: 6
  • Offline
  • Profile
Tags:
  • css
  • datatable
  • selector
  • yui3

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Thu May 23, 2013 7:57 am
In a real browser, I was able to get it working with the CSS selector #table .redbackground (which oddly seems less specific than what you suggested). I posted the update to my blog.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 516
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: Simplified YUI3 Datatable cell formatting

Post Posted: Thu May 23, 2013 9:14 am
It is less specific, but it is still more specific than DataTable's row striping css. ID selectors have the highest specificity, and YUI CSS never uses ID selectors in its CSS, so it's safe to use (when appropriate) to guarantee style overrides.
  [ 10 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic
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