ASP.NET/C# Repeater control with Expand and Collapse

Posted on 2012-08-31
Last Modified: 2012-09-17
I'm using a repeater control for binding data from the database and i'm assigned to redesign the page.  I would need to show the user little content and when he clicks on that content i would be able to show the full description along with the scrollbar. But i wouldn't supposed to use any scripting language and Ajax could you please help?
Question by:deepthilomada
    LVL 26

    Accepted Solution

    Hi deepthilomada,

    I have done similar dev using the Ajax Collapsible Panel extender but not with server-side controls.

    Essentially you create an outer/parent form that returns a minimal dataset, maybe the ID and the Title associated with the Detail record you want to display in the hidden/expandable section.

    Then in the item template of the formview/gridview/listview/whatever control, you have a details view inside a repeater.

    The details view has a sql datasource (also inside the repeater) which requires a control parameter in the select parameters section, the control parameters controlname should bind to a control in the parent form that contains the ID of the record for which you want to display detail.

    The detailsview sql datasource selectcommand should filter on the ID parameter fetched from the parent form via the control parameter.
    Select Detail from sometable where [ID}=@ID

    Open in new window

    Essentially you will have created a sub-form/view that fetches all details for every record in the parent form. How you will hide and show the details sections without using ajax or javascript, I am a little unsure of at the moment, but I am sure it's doable by switching CssClass on postback.


    LVL 26

    Expert Comment

    by:Alan Warren
    Hi deepthilomada,
    this may be the sort of thing you are looking for:
    A DetailsView inside a Repeater, the visibility of the details view is toggled by swithching CssClass on Repeater1_ItemCommand.

    DetailsView nested in Repeater with visibility toggled on Repeater_ItemCommandDetailsView nested in Repeater with visibility toggled on Repeater_ItemCommand

    <%@ Page Language="VB" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <script runat="server">
      Protected Sub Repeater1_ItemCommand(source As Object, e As System.Web.UI.WebControls.RepeaterCommandEventArgs)
        Dim objDetailsView As DetailsView = CType(e.Item.FindControl("DetailsView1"), DetailsView)
        If objDetailsView IsNot Nothing Then
          With objDetailsView
            If .CssClass = "hide" Then
              .CssClass = "show"
              .CssClass = "hide"
            End If
          End With
        End If
      End Sub
    <html xmlns="">
    <head runat="server">
        <style type="text/css">
          table.hide {display:none;}
        <form id="form1" runat="server">
        <asp:SqlDataSource ID="TitlesSqlDataSource" runat="server" 
            ConnectionString="<%$ ConnectionStrings:cnSessionTest %>" 
            SelectCommand="Table_1_Titles_Sel" SelectCommandType="StoredProcedure"></asp:SqlDataSource>    
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="TitlesSqlDataSource" onitemcommand="Repeater1_ItemCommand">
                <!-- Begin Top Level Titles -->
                <asp:LinkButton ID="TitleLinkButton" runat="server" Text='<%# Eval("Title") %>' CommandName="Select"/>
                <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' Visible="false" />
                <asp:DetailsView ID="DetailsView1" DataSourceID="DetailsSqlDataSource" 
                  runat="server" Height="50px" Width="125px" AutoGenerateRows="False" 
                  DataKeyNames="ID" CssClass="hide">
                    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                      ReadOnly="True" SortExpression="ID" />
                    <asp:BoundField DataField="Detail" HeaderText="Detail" 
                      SortExpression="Detail" />
                <asp:SqlDataSource ID="DetailsSqlDataSource" runat="server" 
                  ConnectionString="<%$ ConnectionStrings:cnSessionTest %>" 
                  SelectCommand="Table_1_Details_Sel" SelectCommandType="StoredProcedure">
                    <asp:ControlParameter ControlID="IDLabel" Name="ID" PropertyName="Text" 
                      Type="Int32" />
                <!-- End Top Level Titles -->

    Open in new window

    The SQL scripts used in the sample
    -- Create table script
    CREATE TABLE [dbo].[Table_1](
    	[ID] [int] IDENTITY(1,1) NOT NULL,
    	[Title] [varchar](50) NULL,
    	[Detail] [varchar](1000) NULL,
    	[ID] ASC
    ) ON [PRIMARY]
    -- Create sproc 1 script
    ALTER PROCEDURE [dbo].[Table_1_Titles_Sel]
    	SELECT [ID]
    	FROM [dbo].[Table_1]
    -- Testing
    -- exec Table_1_Sel
    -- Create sproc 2 script
    ALTER PROCEDURE [dbo].[Table_1_Details_Sel]
    	@ID INT = NULL
    	SELECT [ID]
    	FROM [dbo].[Table_1]
    	WHERE [ID]=@ID
    -- Testing
    -- exec Table_1_Details_Sel 1

    Open in new window

    Alan ";0)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
    Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
    The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
    Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now