[Solved] Client-side access to controls within HeaderTemplate

[Steele]

Hi All,
I am having trouble accessing a control in my HeaderTemplate on the client side (javascript). The PanelBar looks like : 

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="FullExpandedItem"
        OnItemClick="RadPanelBar1_ItemClick" Width="100%" OnClientItemClicking="OnExpandoClick"
        Height="100%">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Element" Selected="True"
                Expanded="True">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="Element">
                        <ItemTemplate>
                            <telerik:RadGrid ...</telerik:RadGrid>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <HeaderTemplate>
                <div style="margin-left: 5px">
                    <asp:Label ID="ElementDescriptor" runat="server" Text="Element"></asp:Label>
                </div>
                </HeaderTemplate>
            </telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Category" BackColor="#8080FF">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="Category">
                        <ItemTemplate>
...
</ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <HeaderTemplate>
                <div style="margin-left: 5px">
                    <asp:Label ID="CategoryDescriptor" runat="server" Text="Category"></asp:Label>
                </div>
                </HeaderTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Criteria" BackColor="#00C000">
                <Items>
                    <telerik:RadPanelItem runat="server" Value="Criteria">
                        <ItemTemplate>
...
</ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <HeaderTemplate>
                <div style="margin-left: 5px">
                    <asp:Label ID="CriteriaDescriptor" runat="server" Text="Criteria"></asp:Label>
                </div>
                </HeaderTemplate>
            </telerik:RadPanelItem>
        </Items>
        <ExpandAnimation Duration="1000" />
    </telerik:RadPanelBar>

Pretty much, the HeaderTemplate is used to remove the "Expand" image on the right of the default.
What I can't work out is how to access it to change the labels text. The following script is used on the OnClientItemClicking event for the PanelBar :

function OnExpandoClick(sender, eventArgs) {
    var panelBar = $find("<%= RadPanelBar1.ClientID %>");
    var currentItem = panelBar.get_selectedItem();
    var item = eventArgs.get_item();
    // Try 1
    //  var thisItem = panelBar.findItemByText('Category');
    //  thisItem.findControl('CategoryDescriptor').text = 'Category222';
    // Try 2
        var lbl = $find('<%= RadPanelBar1.FindItemByText("Category").Header.FindControl("CategoryDescriptor").ClientID %>');
        lbl.Text = 'Category222';

    } else {
        eventArgs.set_cancel(true);
    }
}

As you can see, I have tried 2 different ways, but to no avail.
Any help with this is greatly appreciated.
Steele.

[Cori]

Hello Steele,

By changing you second attempt from $find to $get should work. The reason being that the Label control is not an ASP.NET Ajax control.

Also, if you wanted to hide the expand icon, you could use this css style to do that without having to create a header template for each RadPanelItem:

.hideExpandHandle .rpOut .rpExpandHandle
{
    display: none !important;
}

You then just add the hideExpandHandle to the CssClass of each RadPanelItem parent.

I hope that helps.

[Steele]

Thanks for the info Cori.  The $get sorted me out!
Using just a label is the "proof of concept". Once I have learned the lifecycles, I hope to put more info in there.
Steele.