Friday, June 27, 2008

Dojo - focus or select custom tab in a TabContainer on page load

Problem: On page load you want to load a particular tab instead of default tab in a Dojo TabContainer.
Solution:
This solution works with server side scripting which allows you evaluate request scope parameters, like jsp, velocity, PHP etc.
In the url that fetches the target page pass tab id as request parameter. For example, the URL that contains tab is www.chandankumar.com/tabcontainer.html and the tab id that I want to select is "tab4" then URL would become www.chandankumar.com/tabcontainer.html?tab_id=tab4
Next step: in the page tabcontainer.html you would need to evaluate tab_id in the head so resulting javascript should look something like this

dojo.addOnLoad(function () {dijit.byId('mainTabContainer').selectChild('tab4');});

For example in Velocity the actual code would look something like this

<script type="text/javascript">
dojo.addOnLoad(function () {dijit.byId('mainTabContainer').selectChild('$request.getParameter('tab_id')');});
</script>

Assuming that 'mainTabContainer' is the TabContainer id

5 comments: