Showing/Hiding a Panel in a Repeater

9 Nov 2006 12:24 PM

Kevin Humphreys

Hi,
I am trying to show and hide different panels in a row of a repeater pending
on the record that is returned.
Inside in the <ItemTemplate> I have a number of Panels and a function called
ShowPanel.
If the field "Panel" returns Panel1 then I was to show Panel1 and hide
Panel2, Panel3 and Panel 4.
If the field "Panel" returns Panel2 then I was to show Panel2 and hide
Panel1, Panel3 and Panel 4 etc.

<asp:repeater id="Repeater1" runat="server">
<ItemTemplate>
<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
<asp:Panel id="Panel1" runat="server">Panel1</asp:Panel>
<asp:Panel id="Panel2" runat="server">Panel2</asp:Panel>
<asp:Panel id="Panel3" runat="server">Panel3</asp:Panel>
<asp:Panel id="Panel4" runat="server">Panel4</asp:Panel>
<%# ShowPanel(Container.DataItem("Panel")) %>
</div>
</ItemTemplate>
</asp:repeater>

The ShowPanel funciton is as follows

    Public Function ShowPanel(ByVal gender As String) As String
        Select Case gender
            Case "Panel1"
                Panel1.Visible = True
                Panel2.Visible = False
                Panel3.Visible = False
                Panel4.Visible = False
            Case "Panel2"
                etc...
        End Select
        Return Nothing
    End Function

However when I do this I get the following error message
"System.NullReferenceException: Object reference not set to an instance of
an object."

Any ideas?

You help is much appreciated.

Regards,
Kevin Humphreys.

10 Nov 2006 10:06 PM

MikeS

I think you will have to use FindControl.

<%@ Page Language="VB" %>

<%@ Import Namespace="System.Data" %>

<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
        If IsPostBack = False Then
            Repeater1.DataSource = GetData()
            Repeater1.DataBind()
        End If
    End Sub

    Private Function GetData() As DataTable
        Dim dt As New DataTable
        dt.Columns.Add("ID")
        dt.Columns.Add("Text")
        For i As Integer = 1 To 10
            dt.Rows.Add(i, "Item " & i)
        Next
        Return dt
    End Function

    Protected Sub dlOption_SelectedIndexChanged(ByVal sender As Object,
ByVal e As System.EventArgs)
        Select Case dlOption.SelectedItem.Text
            Case "Panel A"
                Toggle("PanelA", "PanelB")
            Case "Panel B"
                Toggle("PanelB", "PanelA")
        End Select
    End Sub

    Private Sub Toggle(ByVal onID As String, ByVal offID As String)
        For Each ri As RepeaterItem In Repeater1.Items
            Dim pOn As Panel = ri.FindControl(onID)
            Dim pOff As Panel = ri.FindControl(offID)
            pOn.Visible = True
            pOff.Visible = False
        Next
    End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" ID="dlOption"
AutoPostBack="true"
OnSelectedIndexChanged="dlOption_SelectedIndexChanged">
                <asp:ListItem Text="" Selected="True"></asp:ListItem>
                <asp:ListItem Text="Panel A"></asp:ListItem>
                <asp:ListItem Text="Panel B"></asp:ListItem>
            </asp:DropDownList>
            <hr />
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <asp:Label runat="server" Text='<%# Eval("ID")
%>'></asp:Label><br />
                    <asp:Label runat="server" Text='<%# Eval("Text")
%>'></asp:Label><br />
                    <asp:Panel runat="server" ID="PanelA"
Visible="false">
                        This is panel A
                    </asp:Panel>
                    <br />
                    <asp:Panel runat="server" ID="PanelB"
Visible="false">
                        This is panel B
                    </asp:Panel>
                    <hr />
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>