First level navigation in Custom resource provider WAP

Question

Hi,
   we have created a custom resource provider in WAP,im able to display the grid in the tab which is displayed
when custom resource provider is clicked.
How can we achieve the first level navigation on clicking on any item in the grid and after navigating need to display subtabs
and display usagebars in each tab.
The live example for the above scenario is "Virtual Machines" resource provider in public azure portal.
how can we achieve similar functionality in our custom resource provider??
any help is really appreciated

Answer 1

HI Manesh,
 thanks for your solution...im able to implement first level navigation successfully.
But Im facing one issue .PFB the details
 the subnav tab template is as below:
<div class="vmdashboard">
    <div class="vm-overview">
        <div class="vm-usage">
            <div class="vm-dashboard-usage">
                <h2>"usage overview"</h2>
            </div>
            <div class="vm-attacheddevices">
                <h2>"attached devices"</h2>
                <div class="gridContainer"></div>
            </div>
        </div>
    </div>
</div>
so first time when I on the navigation click on the Parent Tab it navigates to the subtab and displays the data as expected,now when I click on back button some part of the template in the subtab is getting displayed along with the parent tab grid data(on
top of the parent Tab grid).
ie in this case if I navigate back to parfent tab from subtab the headers mentioned in the above template were also getting added in parent Tab as shown in the below order.
Usage overview
attached devices
parent tab grid
this should not happen as I don't have the headers in parent tab template.
I tried adding the below code in cleanup function of subtab
 function cleanUp() {
        if (grid) {
            grid.wazObservableGrid("destroy");
            grid = null;
            var parent = $(".vm-dashboard");
            parent = null;