Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Patch: 3.3.0 - 3.4.0 DataTable formatters get wrong o.td (gallery-patch-340-datatable-formatter) on cdn

Last Updated: 08/26/11

+ 0 -

Luke Smith

YUI Contributor

See 19 more by this user.

Created: 07/30/11
Last CDN Push: 08/24/11
Build Tag: gallery-2011.08.24-23-44
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0
Free for use.

See ticket #2529920 for the back story. http://yuilibrary.com/projects/yui3/ticket/2529920

This patch replaces a number of methods in the render cycle. The end result is that where formatters could previously reference o.td, they cannot now. If a Node is absolutely necessary to generate the cell contents, o.createCell() has been added to create an empty cell and return the liner <div>. If you need the <td>, o.createCell().get('parentNode') should do the trick.

This is a workaround, not a permanent solution, and the rendering logic will not likely look like it does in the patch when it is fixed properly. This means o.createCell() is a construct of this workaround and can't be relied on for future versions of YUI. Some mechanism to get the cell will be there, though.

NOTE: there is a bug in version of this patch prior to gallery-2011.08.24-23-44. If you can't update your gallery build configuration, the workaround is here: https://gist.github.com/1157902

Use a variety of different format techniques in a simple table (this does not include the bug patch noted in the module description above)

Code Sample

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.08.24-23-44'
}).use('gallery-patch-340-datatable-formatter', function(Y) {
 
    var table = new Y.DataTable.Base({
        columnset: [
            {
                key: 'name',
                formatter: function (o) {
                    return o.value.toUpperCase();
                }
            },
            'age',
            {
                key: 'other',
                formatter: "Letter: {value}"
            },
            {
                key: 'fooga',
                formatter: function (o) {
                    o.createCell().setContent("<strong>FOOOOOOOGA!</strong>");
                }
            }
        ],
        recordset: [
            { name: "Phil", age: 53, other: "A" },
            { name: "Brian", age: 23, other: "B" },
            { name: "Doug", age: 50, other: "C" },
            { name: "Sal", age: 153, other: "D" }
        ]
    }).render('#x');
 
});