Master Details using jQuery Tabs

Question

Hello,

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>

Answer 1

You'll need AJAX since the JQuery tabs don't post back to the server. If you want tabbed behaviour that does post back, its fairly easy to implement manually, or you can download a wide assortment of pre-built controls for this.

If there is a particular reason to want to use the JQuery tabs, here is an example of it being used with AJAX fragments. You'll probably want to wire up your click events from the grid in your master list to both load the ajax content into the 2nd tab, as well as switch to the tab automatically as part of the ajax callback.

Answer 2

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});

or

$('#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/

Answer 3

I am trying to do something similar, but in ASP.NET 2.0 and Visual Studio 2005.

I am using Klaus' jQuery tabs with four tabs. Each tab loads a gridview based on a column value in a SQL Server 2005 database. I want to be able to select a row and have a FormView or DetailsView appear under the grid in the same tab in order to update additional columns in the same table that are not visible in the gridview above.

Example:

Gridview shows FirstName, LastName, Telephone from RequestorTable. Gridview also shows CompanyName, City, State from CompanyTable. Gridview shows FilesRequested, RequestID, RequestDate from RequestTable. Each Tab shows the same columns based on the value of the Approved column in the RequestTable and each row is selectable.

When a user selects a row in the Gridview, I want an editable details view to appear below the GridView in the same tab. This new details view will allow me to update several columns in the RequestTable returned by the SQL DataSource but not shown in the original GridView.

I would appreciate any help anyone can give me with this. I am new at web development (10 months experience) and a novice at Javascript, AJAX, and ASP.NET. Thanks