Have Geek Brain

Using cellUpdateEvent with YUI DataTable and JSON DataSource

I am working with a UI that has a (YUI2) JSON DataSource that is used to populate the DataTable . I would like to have a simple animation in the cell where the value has changed when the value in the table is updated.

Here are some relevant code snippets:

var columns = [
    {key: 'foo'},
    {key: 'bar'},
    {key: 'baz'}
];

var dataSource = new YAHOO.util.DataSource('/someUrl');
dataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
dataSource.connXhrMode = 'queueRequests';
dataSource.responseSchema = {
    resultsList: 'results',
    fields: [
        {key: 'foo'},
        {key: 'bar'},
        {key: 'baz'}
    ]
};

var dataTable = new YAHOO.widget.DataTable('container', columns, dataSource);

var callback = function() {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};

dataSource.setInterval(1000, null, callback);

And here's what I would like to do with it:

dataTable.subscribe('cellUpdateEvent', function(record, column, oldData) {
    var td = dataTable.getTdEl({record: record, column: column});
    YAHOO.util.Dom.setStyle(td, 'backgroundColor', '#ffff00');
    var animation = new YAHOO.util.ColorAnim(td, {
        backgroundColor: {
            to: '#ffffff';
        }
    });
    animation.animate();
};

However, it looks like the usage is cellUpdateEvent

working. Is the cell updated as a result of the callback setInterval

even triggering a cellUpdateEvent

?

Perhaps I don't quite understand what's going on under the hood DataTable

. Perhaps the entire table is redrawn every time data is requested, so it doesn't know or care about individual cell changes ?. Is the solution to write my own custom replacement function onDataReturnReplaceRows

? Can anyone enlighten me on how I can do this?

Edit:

After digging through datatable-debug.js, it onDataReturnReplaceRows

doesn't seem to run cellUpdateEvent

. It calls reset()

on RecordSet

that maintains DataTable

, which removes all lines; it fills the table with fresh data again. I tried changing it to use onDataReturnUpdateRows

, but that doesn't work either.

Edit2:

To achieve the control I wanted, I ended up writing my own data-based list <ul>

, which slightly changed the meaning of the problem I was trying to solve. Jenny's answer below should help solve this for most of the others, so I took it as a solution.

+2


a source to share


2 answers


cellUpdateEvent is only fired in response to a call to updateCell (). You want to subscribe to cellFormatEvent. There were a few more issues in your code, so this should work:



dataTable.subscribe('cellFormatEvent', function(o) {
    YAHOO.util.Dom.setStyle(o.el, 'backgroundColor', '#ffff00');
    var animation = new YAHOO.util.ColorAnim(o.el, {
        backgroundColor: {
            to: '#ffffff'
        }
    });
    animation.animate();
});

var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);
+3


a source 


dataTable.subscribe('cellFormatEvent',

function (o) {YAHOO.util.Dom.setStyle (o.el, 'backgroundColor', '# ffff00'); var animation = new YAHOO.util.ColorAnim (o.el, {background color: {to: '#ffffff'}}); animation.animate (); });

var callback = {
    success: dataTable.onDataReturnReplaceRows,
    failure: function() {
        // error handling code
    },
    scope: dataTable
};
dataSource.setInterval(1000, null, callback);


This example will not work because you added a spacing and this is the wrong solution. Since the function will be called every time.

-1


a source






More articles:


All Articles