Question

I’m using the YUI DataTable in a Grails 1.1 project using the Grails UI plugin 1.0.2 (YUI being 2.6.1).

By default, the DataTable displays 2 paginators: one above and another one below the table. Looking up the YUI API documentation, I could see that I can pass an array of YUI containers as a config parameter but – what are the names of these containers?

I’ve tried loooking at the HTML of the page using Firebug. The ID of the divs containing the paginators are: yui-dt0-paginator0 (above) and yui-dt0-paginator1 (below). If I use them to configure the containers for the navigator, then the navigator is just not displayed at all. Here’s the relevant extract of the GSP page containing the Datatable element.

    <div class='body'>         <h1>This is the List of Control Accounts</h1>         <g:if test='${flash.message}'>         <div class='message'>${flash.message}</div>         </g:if>         <div class='yui-skin-sam'>             <gui:dataTable             controller='controlAccount' action='enhancedListDataTableJSON'             columnDefs='[                 [key:'id', label:'ID'],                 [key:'col1', label:'Col 1', sortable: true, resizeable: true],                 [key:'col2', label:'Col 2', sortable: true, resizeable: true]                 ]'             sortedBy='col1'             rowsPerPage='20'             paginatorConfig='[             template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}',             pageReportTemplate:'{totalRecords} total accounts',             alwaysVisible:true,             containers:'yui-dt0-paginator1'             ]'             rowExpansion='true'             />         </div>     </div> 

Any help?

Thanks!

Rollo

Answer 1

Ok, I have it now. Posting it here in case someone bumps into the same question.

So what you have to do is create a ‘container’ (a DIV will do) by whatever id, and reference it into the containers configuration item. Example:

<div class='body'>     <h1>This is the List of Control Accounts</h1>     <g:if test='${flash.message}'>     <div class='message'>${flash.message}</div>     </g:if>             <div class='yui-skin-sam'>                     <gui:dataTable                     controller='controlAccount' action='enhancedListDataTableJSON'                     columnDefs='[                             [key:'id', label:'ID'],                             [key:'col1', label:'Col 1', sortable: true, resizeable: true],                             [key:'col2', label:'Col 2', sortable: true, resizeable: true]                             ]'                     sortedBy='col1'                     rowsPerPage='20'                     paginatorConfig='[                     template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}',                     pageReportTemplate:'{totalRecords} total accounts',                     alwaysVisible:true,                     containers:'dt-paginator'                     ]'                     rowExpansion='true'                     />             </div>             <div id='dt-paginator' class='yui-skin-sam yui-pg-container' style='text-align: right;'> </div> 

You just have to make sure that the class associated to the div is yui-pg-container. As an added bonus, the style on that div will align the paginator to the right.

Rollo