How to change the datasource on a YUI datagrid after creation

Question

I am using the Yahoo DataTable for which the API is here.

I am having difficulty changing the data once I have rendered the grid once. I am using jQuery to get data via AJAX, or from a client side data island and need to put this back into the grid.

There is no setDataSource method in the DataTable API, and changing 'dataSource.liveData' does not update the grid.

 // does not work
 dataTable.dataSource.liveData = [ {name:"cat"}, {name:"dog"}, {name:"mouse"};

The example I am basing my code on is the basic LocalDataSource example.

How can I update the data source without having to completely recreate the table. I do NOT want to use the YUI datasources that make Async calls. I need to know how I can do this 'manually'.

Answer 1

How can I update the data source without having to completely recreate the table?

Do you mean without using a "new" statement? If so, I haven't had to do this myself, but I use YUI often. I notice that there is a deleteRows method which you could use to delete all the rows, 0 thru the length of the table, and then use the addRows which takes a literal array like yours and an index, 0, in this case.

Have you tried this?

Edit: Take a look at this example. What you want to do can definitely be done. The table is being updated locally at a set interval using the setInterval method (not suprisingly). Taking a look at what setInterval does, you can see that it calls makeConnection on the instance of the data source. The method sounds like it's making a remote call, but it's not necessarily.

Let's take a look at a couple lines from the example.

    // Set up polling
    var myCallback = {
        success: myDataTable.onDataReturnInitializeTable,
        failure: function() {
            YAHOO.log("Polling failure", "error");
        },
        scope: myDataTable
    }
    myDataSource.setInterval(5000, null, myCallback)

the last line could be called once (or on demand as you need) instead of at an interval by rewriting it like this:

myDataSource.makeConnection(null, myCallBack)

which calls the onDataReturnInitializeTable method - which i guess you could call directly which would make more sense.

Anyway, just follow along the example and take out the parts that you don't need. Ultimately it looks like the method onDataReturnInitializeTable is key.

Hope that helps.

Answer 2

You were on the right track, you just forgot to tell the datasource to send the data to the datatable. Assuming you are using a LocalDataSource and want to replace the data in the table with what is in the datasource, after replacing livedata you just do

dataTable.getDataSource().sendRequest(null,
  {success: dataTable.onDataReturnInitializeTable},
  dataTable);

Also see the other onDataReturnXXX methods of DataTable in the API reference. You can append the new data instead of replacing, etc.

Answer 3

I just wanted to add that you can preserve pagination if pass in a call to getState() in the argument property.

dataTable.getDataSource().sendRequest(null,
    {
        success: dataTable.onDataReturnInitializeTable,
        argument: dataTable.getState()       
    }
);

Answer 4

Thanks, AbeP! I'd been looking for how to maintain my datatable paginator for hours! Even when I went back to the YUI API doc for sendRequest, it's not at all clear that that would do it. So, thanks again.