ProductCategory
& ProductSubCategory
Tables to demonstrate this topic. Hope this will help someones' life easy :). You can download the sample code snippet end of this article.Create the following markup in your application. And add jQuery library (i'm using both java-script and jQuery to do this. But if you like just go with jQuery either java-scripts). I use this example just to give you the idea behind the topic.
<div id="divWrapper"> <div> <table> <tr> <td style="width: 15px; padding-left: 2px;"> <a href="JavaScript:ExpandCollapseAll();" id="div_0"> <img id="imgdiv_0" width="9" border="0" src='<%= ResolveClientUrl("~/images/ig_treeMsdn_plus.gif") %>' /> </td> <td style="font-weight: bold; font-size: 16px;"> View Product Categories & sub categories </td> </tr> </table> </div> <div> <asp:GridView ID="gvProductsCategory" runat="server" AutoGenerateColumns="false" GridLines="Both" ShowHeader="false" ShowFooter="false" Width="100%"> <RowStyle BackColor="#A0EFFA" ForeColor="#333333" /> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <EmptyDataTemplate> No Products were found! </EmptyDataTemplate> <Columns> <asp:TemplateField> <ItemTemplate> <table style="width: 100%;" class="removeCellPaddingsAll"> <tr> <td style="width: 20px; height: 25px;"> <a href="JavaScript:ExpandCollapseDiv('div_<%# Eval("ProductCategoryID") %>');"> <img id='imgdiv_<%# Eval("ProductCategoryID") %>' width="9" border="0" src='<%= ResolveClientUrl("~/images/ig_treeMsdn_plus.gif") %>' class="CollapseExpandIMGClass" /> </td> <td style="width: 130px;"> <%#Eval("Name")%> </td> <td> <%# Eval("rowguid")%> </td> </tr> <tr> <td colspan="3"> <div id='div_<%# Eval("ProductCategoryID") %>' style="display: none; border-top: 1px solid darkgray;" class="CollapseExpandDIVClass"> <asp:Repeater ID="rptProductSubCategory" runat="server" DataSource='<%# DataBinder.Eval(Container, "DataItem.InnerVal") %>'> <HeaderTemplate> <table style="width: 100%;"> </HeaderTemplate> <ItemTemplate> <tr> <td style="width: 30px; height: 25px;" /> <td style="width: 120px;"> <%#Eval("Name") %> </td> <td> <%#Eval("ModifiedDate")%> </td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </div> </td> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </div>
Following code snippet for expand/ collapse gridview rows using javascipts. Add this scripts to head tag in the page.
<head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> var expanded = false; var collapseImage = '<%= ResolveClientUrl("~/images/ig_treeMsdn_plus.gif")%>'; var expandImage = '<%= ResolveClientUrl("~/images/ig_treeMsdn_minus.gif")%>'; function ExpandCollapseDiv(divname) { var div = document.getElementById(divname); var img = document.getElementById('img' + divname); if (div.style.display == "none") { div.style.display = "block"; img.src = expandImage; expanded = true; } else { div.style.display = "none"; img.src = collapseImage; expanded = false; } $(".CollapseExpandDIVClass").each(function (index) { console.log(index + ": " + $(this).text()); console.log($(this).css("display") == "block"); if ($(this).css("display") == "block") { expanded = true; } }); if (expanded) { $('#imgdiv_0').attr("src", expandImage); } else { $('#imgdiv_0').attr("src", collapseImage); } } function ExpandCollapseAll() { if (expanded) { $('.CollapseExpandDIVClass').css("display", "none"); $('.CollapseExpandIMGClass').attr('src', collapseImage); $('#imgdiv_0').attr('src', collapseImage); expanded = false; } else { $('.CollapseExpandDIVClass').css("display", "block"); $('.CollapseExpandIMGClass').attr('src', expandImage); $('#imgdiv_0').attr('src', expandImage); expanded = true; } } </script> </head>The C# code,
protected void Page_Load(object sender, EventArgs e) { DataSet _dsProducts = new DataSet(); // create connection string using (SqlConnection _con = new SqlConnection(@"Data Source=ARUNA\MSSQLSERVER1;Initial Catalog=AdventureWorks2008R2;Integrated Security=True")) { using (SqlCommand _cmd = new SqlCommand()) { _cmd.CommandText = "sp_GetProducts"; _cmd.CommandType = System.Data.CommandType.StoredProcedure; _cmd.Connection = _con; SqlDataAdapter _adapter = new SqlDataAdapter(_cmd); if (_con.State != ConnectionState.Open) _con.Open(); _adapter.Fill(_dsProducts); // this will fill _dsProducts with two tables // this will map the dataset into two tables which returns from sp _dsProducts.Tables["Table"].TableName = "ProductCategory"; _dsProducts.Tables["Table1"].TableName = "ProductSubcategory"; } } // lets create the relation with two tables _dsProducts.Relations.Add( "InnerVal", _dsProducts.Tables["ProductCategory"].Columns["ProductCategoryID"], _dsProducts.Tables["ProductSubcategory"].Columns["ProductCategoryID"]); gvProductsCategory.DataSource = _dsProducts.Tables["ProductCategory"]; gvProductsCategory.DataBind(); }
Following SP is to get some dummy records for demonstration purposes using AdventureWorks2008R2 database.
USE AdventureWorks2008R2 -- ============================================= -- Author : Aruna Perera (anishantha87.blogspot.com) -- Create date : 2013-08-21 -- Description : Returns Product category & sub category -- ============================================= CREATE PROCEDURE sp_GetProducts AS BEGIN SET NOCOUNT ON; SELECT TOP 4 [ProductCategoryID], [Name], [rowguid] FROM [AdventureWorks2008R2].[Production].[ProductCategory] SELECT TOP 40 [ProductSubcategoryID], [ProductCategoryID], [Name], [ModifiedDate] FROM [AdventureWorks2008R2].[Production].[ProductSubcategory] END GO
Sample output
No comments:
Post a Comment