This is a migrated thread and some comments may be shown as answers.

Server side PanelBar state (expanded/collapsed)

5 Answers 198 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Phil asked on 27 Oct 2011, 07:17 PM

Hi:
It seems that the e.Item.Expanded in the ItemClick event is always false. How can I find out the state of the Item? Am I using the wrong control to toggle between configuration area and data display area?

<%@ Page Language="VB" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 defaultRadPanelBar_ItemClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadPanelBarEventArgs) Handles defaultRadPanelBar.ItemClick

messageLabel.Text = e.Item.Text & " expanded: " & e.Item.Expanded.ToString

End Sub

'

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Rad Panel</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadPanelBar runat="server" ID="defaultRadPanelBar" Width="100%"

ExpandMode="SingleExpandedItem">

<Items>

<telerik:RadPanelItem Text="Data Parameters" Selected="True">

<ContentTemplate>

<center>

<h3>Params</h3>

</center>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Data">

<ContentTemplate>

<center>

<h3>Data</h3>

</center>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<asp:Label ID="messageLabel" runat="server" Text="Label"></asp:Label>

</form>

</body>

</html>

Phil

5 Answers, 1 is accepted

answered on 28 Oct 2011, 02:16 PM

Hi:
I am trying to get the state of one item, but I take it that ItemClick is called after the item has been collapsed. I also needed the expand event, so I am creating one via the client side OnExpand. So an updated sample is the following:

<%@ Page Language="VB" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 defaultRadPanelBar_ItemClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadPanelBarEventArgs) Handles defaultRadPanelBar.ItemClick

' messageLabel.Text = e.Item.Text & " expanded: " & e.Item.Expanded.ToString

messageLabel.Text = Convert.ToString(e.Item.Text) & " expanded: " & e.Item.Expanded.ToString()

End Sub

'

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

messageLabel.Text = defaultRadPanelBar.Items(1).Text & " expanded: " & defaultRadPanelBar.Items(1).Expanded.ToString()

End Sub

'

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Rad Panel</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadPanelBar runat="server" ID="defaultRadPanelBar" Width="100%"

ExpandMode="SingleExpandedItem"

OnClientItemExpand="OnPanelBarExpand"

>

<Items>

<telerik:RadPanelItem Text="Data Parameters" Selected="True">

<ContentTemplate>

<center>

<h3>Params</h3>

</center>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Data">

<ContentTemplate>

<center>

<h3>Data</h3>

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

</center>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<asp:Label ID="messageLabel" runat="server" Text="Label"></asp:Label>

<script type="text/javascript">

//<![CDATA[

// No service-side event when clicking on the expand button,

// so the following calls the item click event

function OnPanelBarExpand(sender, eventArgs) {

var barText = eventArgs.get_item().get_text();

if (barText == "Data") {

eventArgs.get_item().click();

}

//

//]]>

</script>

</form>

</body>

</html>

So, I think it is expanded then immediately collapsed. Thus Expanded is always false. Very interesting.

Phil

answered on 28 Oct 2011, 03:08 PM

PanelBarExpandedItem.zip

Hello Phil,

I tested the issue that you describe and with your current logic I am also not able to get e.Item.Expanded to be TRUE since every time I click on a RadPanelItem it collapses (it is no longer expanded and therefore e.Item.Expanded returns false). If you, however, change the ExpandMode property to MultipleExpandedItems, you get the correct behavior ( e.Item.Expanded returns true when the RadPanelItem is expanded and false when the RadPanelItem is collapsed). Please take a look at the attached runnable page for more reference.

Greetings,
Kate
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 30 Oct 2011, 06:14 PM

Hi:
I was thinking instead of handling it via PanelBar ItemClick, I would postback with a string identifier and handle it in Page_Load.
Phil

<script type="text/javascript">

//<![CDATA[

// No service-side event when clicking on the expand button,

// so the following calls postback and Page_Load will handle it.

function OnPanelBarExpand(sender, eventArgs) {

var barText = eventArgs.get_item().get_text();

if (barText == "Data") {

__doPostBack('__Page', 'PanelBarExpand');

}

//]]>

</script>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If (Not (IsPostBack)) Then

'

Else

If Request("__EVENTARGUMENT") = "PanelBarExpand" Then

' Data Panelbar Expand clicked

End If

End Sub