Back to the index of articles and examples

DataTable with extra details in tabbed pop-up

This example has a very simple base table and on clicking on any of the cells, a panel will pop up containing information related to the clicked record. This information is presented in several tabs, each containing a child DataTable.

All of the tables in this example are either filled with a static array or via a function. None of them take their contents from any server so the example is fully self-contained except for the YUI components retieved from the YUI download site.

To make this example work with server data, in those places where each DataSource is instantiated, the reference to the local array or the filling function should be changed to an appropriate URL. An initialRequest configuration property would probably need to be added to the DataTable.

The floating panel is statically built, its contents are simple divs to hold each of the DataTables. Though the panel can load content from remote servers, it does not make sense in this case since the content will always be a table, the content of the table is the one that will change, not the definition of the table itself. Thus, the server is to provide the data for the table, not its definition, which is static.

On each change of active tab a separate setTableX is called. It first checks to see if the current baseRecordId is the same as the one last shown. If it is, then it means the table data it has previously loaded is still good and simply returns, if it is not it then checks if the table is actually created. If it is, it simply reloads it from the same source, if it is not, it creates the table and loads it, in both cases from the filler function.

This example is self-contained, its only dependencies come from the YUI site.