Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3842
  • Last Modified:

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

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?
0
deepthilomada
Asked:
deepthilomada
  • 2
1 Solution
 
Alan WarrenCommented:
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.

HTH

Alan
0
 
Alan WarrenCommented:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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"
        Else
          .CssClass = "hide"
        End If
        .Dispose()
      End With
    End If
  End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
      table.hide {display:none;}
      table.show {display:block;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:SqlDataSource ID="TitlesSqlDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:cnSessionTest %>" 
        SelectCommand="Table_1_Titles_Sel" SelectCommandType="StoredProcedure"></asp:SqlDataSource>    
    </div>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="TitlesSqlDataSource" onitemcommand="Repeater1_ItemCommand">
          <ItemTemplate>
            <!-- 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">
              <Fields>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                  ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="Detail" HeaderText="Detail" 
                  SortExpression="Detail" />
              </Fields>
                
            </asp:DetailsView>

 
            <asp:SqlDataSource ID="DetailsSqlDataSource" runat="server" 
              ConnectionString="<%$ ConnectionStrings:cnSessionTest %>" 
              SelectCommand="Table_1_Details_Sel" SelectCommandType="StoredProcedure">
              <SelectParameters>
                <asp:ControlParameter ControlID="IDLabel" Name="ID" PropertyName="Text" 
                  Type="Int32" />
              </SelectParameters>
            </asp:SqlDataSource>

            <!-- End Top Level Titles -->
          </ItemTemplate>

        </asp:Repeater>

    </form>
</body>
</html>

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,
 CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

-- Create sproc 1 script
ALTER PROCEDURE [dbo].[Table_1_Titles_Sel]
AS
BEGIN
	SELECT [ID]
		  ,[Title]
		  ,[Detail]
	FROM [dbo].[Table_1]

END

-- Testing
-- exec Table_1_Sel


-- Create sproc 2 script
ALTER PROCEDURE [dbo].[Table_1_Details_Sel]
	@ID INT = NULL
AS
BEGIN
	SELECT [ID]
		  ,[Detail]
	FROM [dbo].[Table_1]
	WHERE [ID]=@ID

END

-- Testing
-- exec Table_1_Details_Sel 1

Open in new window

Alan ";0)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now