Master Details using jQuery Tabs

I am trying to implement a master details solution using the jQuery Tabs. Two tabs, first tab contains Northwind Customers, selecting customer command should display tab2 with the orders for the customer.

So far, I have come to the conclusion that it cannot be done without using some sort of Ajax. Am I correct?

I got some pointers from Matt, Matt Berseth.

Does anyone have any idea or samples they can share on how to accomplish this?

I am thinking that one way of doing it is to pass the CustomerId in the Client Click event of the LinkButton of GridView1 and then focus Tab2 and somehow load the details grid via javascript. I am not too good with Javascript, so I am stuck here.

Suggestions and sample code will be very helpful.

Thanks

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Customers</a></li>
    <li><a href="#tabs-2">Orders</a></li>
</ul>
<div id="tabs-1">

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
AutoGenerateColumns="False" DataKeyNames="CustomerID" 
DataSourceID="SqlDataSource1" PageSize="20">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:LinkButton ID="lbtnSelect" runat="server" 
Text="Select Link" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:CommandField ShowSelectButton="True" />
    <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" 
        SortExpression="CustomerID" />
    <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" 
        SortExpression="CompanyName" />
    <asp:BoundField DataField="Region" HeaderText="Region" 
        SortExpression="Region" />
    <asp:BoundField DataField="PostalCode" HeaderText="PostalCode" 
        SortExpression="PostalCode" />
</Columns>
</asp:GridView>

</div>
<div id="tabs-2">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="OrderID" DataSourceID="SqlDataSource2">
        <Columns>
            <asp:BoundField DataField="OrderID" HeaderText="OrderID" InsertVisible="False" 
                ReadOnly="True" SortExpression="OrderID" />
            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" 
                SortExpression="CustomerID" />
            <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" 
                SortExpression="OrderDate" />
        </Columns>
    </asp:GridView>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [CustomerID], [CompanyName], [Region], [PostalCode] 
FROM [Customers]">
</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT [OrderID], [CustomerID], [OrderDate] 
FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
<SelectParameters>
    <asp:ControlParameter ControlID="GridView1" Name="CustomerID" 
        PropertyName="SelectedValue" Type="String" />
</SelectParameters>
</asp:SqlDataSource>

Solution

Its definately doable using jQuery and AJAX and could be very nice, it will take some significant work, since you can't really use the GridView (unless you use an UpdatePanel). What you can do is set the selected tab after postback. There is an option on the tab control

$('#tabs').tabs({selected:1});

$('#tabs').tabs();
$('#tabs').tabs('select', 1);

Post a comment if your interested in doing the jquery AJAX route, I can provide a sample. Can you use a WCF Service to access your order details?

Sample Code

I just finished some sample code based for this I uploaded it to my MS Live SkyDrive. You will need the WCF REST Starter Kit. jQuery-AjaxTabsView-Sample.zip

Blog Post

I also wrote blog post describing the sample. Thanks for the idea. http://bendewey.wordpress.com/2009/02/04/jquery-tab-view-using-ajax-and-wcf-rest-service/