I admit, Matt Berseth is really inspiring me! Few days ago I pass through 2 of his great posts:
The first one is pure design tips one which I used for making good presentation of my demo here. The 2nd post is actually the idea. Here I'll do the same idea Matt presented in his post, but I'll user ASP.NET 2.0 simple stuff plus ASP.NET AJAX Toolkit CollapsiblePanel control.It is required that you have ASP.NET AJAX Extensions installed to be able to run the sample code. I'll not go through the presentation tips mentioned in Matt's post, I'll just show my technique to implement grouping idea with GridViews and CollapsiblePanel along with SqlDataSource which of course can be replaced with ObjectDataSource. I should mention that I'm using same style sheets provided in Matt's sample code along with images [View Demo]. Bellow is a screenshot of a running sample: The whole group is wrapped inside a ComponentArt like design: 1: <div id="dlg" class="dialog" style="width: 700px"> 2: <div class="header" style="cursor: default"> 3: <div class="outer"> 4: <div class="inner"> 5: <div class="content"> 6: <h2> 7: Northwind: Orders By Customer</h2> 8: </div> 9: </div> 10: </div> 11: </div> 12: <div class="body"> 13: <div class="outer"> 14: <div class="inner"> 15: <div class="content"> 16: <!-- My Code Goes Here --> 17: </div> 18: </div> 19: </div> 20: </div> 21: <div class="footer"> 22: <div class="outer"> 23: <div class="inner"> 24: <div class="content"> 25: </div> 26: </div> 27: </div> 28: </div> 29: </div> The grouping will display orders by customer from Northwind database. Bellow is the SqlDataSource code for selecting Customers "sqlDsCustomers": 1: <asp:SqlDataSource ID="sqlDsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" 2: SelectCommand="SELECT [Customers].[CustomerID], [Customers].[CompanyName], COUNT([OrderID]) TotalOrders 3: FROM [Customers] INNER JOIN [Orders] ON [Customers].[CustomerID]=[Orders].[CustomerID] 4: Group By [Customers].[CustomerID], [Customers].[CompanyName]"> 5: </asp:SqlDataSource> Now simply I can display my master data (grouping) which will display CustomerID with total number of orders he made: 1: <asp:Panel CssClass="grid" ID="pnlCust" runat="server"> 2: <asp:UpdatePanel ID="pnlUpdate" runat="server"> 3: <ContentTemplate> 4: <asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False" 5: DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False" OnRowCreated="gvCustomers_RowCreated"> 6: <Columns> 7: <asp:TemplateField> 8: <ItemTemplate> 9: <asp:Panel CssClass="group" ID="pnlCustomer" runat="server"> 10: <asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png" 11: Style="margin-right: 5px;" runat="server" /> 12: <span class="header"> <%#Eval("CustomerID")%>: <%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%>Orders)</span> 13: </asp:Panel> <!-- Nested GridView And CollapsibalePanel will placed bellow this line --> 14: </ItemTemplate> 15: </asp:TemplateField> 16: </Columns> 17: </asp:GridView> 18: </ContentTemplate> 19: </asp:UpdatePanel> 20: </asp:Panel> This will simply display something like this: Note that the GridView is wrapped inside an ASP.NET Panel control. This is actually important when we start to work with CollapsiblePanel extender. As we want to implement the grouped data of orders. We will add a nested GridView with its own SqlDataSource. Bellow is a the SqlDataSource for the nested GridView that will display customer orders "sqlDsOrders": 1: <asp:SqlDataSource ID="sqlDsOrders" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>" 2: SelectCommand="SELECT [OrderID], [OrderDate], [RequiredDate], [Freight], [ShippedDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"> 3: <SelectParameters> 4: <asp:Parameter Name="CustomerID" Type="String" DefaultValue="" /> 5: </SelectParameters> 6: </asp:SqlDataSource> 1: protected void gvCustomers_RowCreated(object sender, GridViewRowEventArgs e) 2: { 3: if (e.Row.RowType == DataControlRowType.DataRow) 4: { 5: SqlDataSource ctrl = e.Row.FindControl("sqlDsOrders") as SqlDataSource; 6: if (ctrl != null && e.Row.DataItem != null) 7: { 8: ctrl.SelectParameters["CustomerID"].DefaultValue = 9: ((DataRowView)e.Row.DataItem)["CustomerID"].ToString(); 10: } 11: } 12: } 1: <asp:Panel Style="margin-left: 20px; margin-right: 20px" ID="pnlOrders" runat="server"> 2: <asp:GridView AutoGenerateColumns="false" CssClass="grid" ID="gvOrders" DataSourceID="sqlDsOrders" 3: runat="server" ShowHeader="true" EnableViewState="false"> 4: <RowStyle CssClass="row" /> 5: <AlternatingRowStyle CssClass="altrow" /> 6: <Columns> 7: <asp:TemplateField ItemStyle-CssClass="rownum"> 8: <ItemTemplate><%Container.DataItemIndex + 1%></ItemTemplate> 9: </asp:TemplateField> 10: <asp:BoundField HeaderText="Order ID" DataField="OrderID" ItemStyle-Width="80px" /> 11: <asp:BoundField HeaderText="Date Ordered" DataField="OrderDate" DataFormatString="{0:MM/dd/yyyy}" 12: ItemStyle-Width="100px" /> 13: <asp:BoundField HeaderText="Date Required" DataField="RequiredDate" DataFormatString="{0:MM/dd/yyyy}" 14: ItemStyle-Width="110px" /> 15: <asp:BoundField HeaderText="Freight" DataField="Freight" DataFormatString="{0:c}" 16: ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Right" /> 17: <asp:BoundField HeaderText="Date Shipped" DataField="ShippedDate" DataFormatString="{0:MM/dd/yyyy}" 18: ItemStyle-Width="100px" /> 19: </Columns> 20: </asp:GridView> 21: </asp:Panel> 1: <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 2: TargetControlID="pnlOrders" 3: ExpandControlID="pnlCustomer" CollapseControlID="pnlCustomer" 4: CollapsedSize="0" Collapsed="True" 5: AutoCollapse="False" AutoExpand="False" ScrollContents="false" 6: ImageControlID="imgCollapsible" 7: ExpandedImage="~/Assets/img/minus.png" CollapsedImage="~/Assets/img/plus.png" 8: ExpandDirection="Vertical" /> Now I'll explain the most important properties of the CollapsiblePanel that is used:
Now when this run, it will display a collapsed list of customers. when you click on the customer it will expand and show list of orders made by that customer. You can refer to the posted mentioned above for more design and presentation tips. Also the code of this sample is available to download. Download sample code (291.25 kb) -AjaxControlToolkit v1.0.10920.0 included- |