Client-side access to controls within HeaderTemplate

3 posts, 0 answers
  1. Steele
    Steele avatar
    96 posts
    Member since:
    Mar 2008

    Posted 17 Nov 2010 Link to this post

    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.



  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 18 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steele
    Steele avatar
    96 posts
    Member since:
    Mar 2008

    Posted 18 Nov 2010 Link to this post

    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.
Back to Top