YUI2 datatable inside tab

Question

I have a datatable configured as below

function handleTabChange(e){    
var errDataSource = new YAHOO.util.DataSource("/webapp/somecontroller");
    errDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    errDataSource.responseSchema = { 
              fields: [
                        "id","name","err_msg","err_sugg","created_at","created_by","rev"
                       ] 
              };
    var errColDef = [ 
                   {key:"error_id", sortable:true}, 
                    {key:"created_at", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, 
                    {key:"name",  sortable:true}, 
                    {key:"rev",  sortable:true}, 
                    {key:"err_msg"}, 
                    {key:"err_sugg" }, 
                    {key:"created_by"} 
                ]; 
    var errorDataTable = new YAHOO.widget.Datatable("errorDataTable",errColDef, errDataSource,{scrollable:true,width:"100%"});
    errorDataTable.render();
}

In my tab where I want to populate this datatable I add the following line

tab3.addListener('click', handleTabChange);

When I debug this , I can see that the control flows through

handleTabChange

but my network shows no calls being made by the datasource.

Can you pleae hlep me if I am integrating the datatable to the tab view correctly.

score 0 · Answer 1 · answered Jul 20 '13 at 07:26

I know this is not a complete answer but I haven't been using YUI2 for quite some time now. This is what I recall, I hope it helps. There was an issue when creating a DataTable in a hidden container, specially a scrolling DataTable when it needs to do a lot of size calculations to sync the headers to the content. In some browsers, trying to read the width or height of invisible elements causes an error. It is quite possible that if you run your code in a debugger with the 'break on error' option on, you will see some error happening. This prevents the DataTable from completing the initialization and, thus, it never reaches the part when it fetches the data.

I didn't remember the name, but browsing through the API docs I found onShow() which was meant to fix this.

Also, listening to a click on the tab does not guarantee that the panel for the tab is visible. You should listen to the activeTabChange on the TabView which fires after the tab has become visible.

Sorry if I can't be of much help, it's been a while. Cheers.

score 0 · Answer 2 · answered Jul 20 '13 at 18:38

I haven't used YUI2 in a while (and I strongly recommend you not to write any new code with YUI2 and switch to YUI3 for new stuff), but it looks like you're missing the initialRequest option or to call sendRequest on the DataSource.

The DataTable Control: JSON Data Over XHR example shows how to use of initialRequest and sendRequest.

YUI2 datatable inside tab

2 Answers2