RadPanelBar inside of ASP DataList

[Scott]

So I have a RadPanelBar inside of an ASP DataList, because of this I'm having problems with javascript not working properly.  Here is a code snipped, this is also inside of a content area of a master page.  The javascript methods for the RadPanelItem (getExpanded, expand, and collapse) are not functioning.  The RadPanelItem never collapses.  If the PanelBar is moved outside of the datalist then everything works.  If the RadPanelBar is inside of the dataList then the following javascript items no longer work correctly.
    $find - using clientID
    RadPanelItem methods - getExpanded, expand, and collapse

<asp:DataList ID="dlDrugDetails" Runat="server" Width="100%" DataKeyField="OrderApplicantID" Visible="True" CellPadding="0" CellSpacing="0" 
onitemcreated="dlDrugDetails_ItemCreated" OnItemDataBound="dlDrugDetails_ItemDataBound">

         <ItemTemplate>

  

    <telerik:RadPanelBar ID="pbDrugs2" runat="server" Width="800px" OnClientLoad="pbDrugs2_OnLoad">

        <Items>

            <telerik:RadPanelItem Value="piDrugDetail" Expanded="false">

                <ContentTemplate>

                    <Drugs:Message runat="server" id="UCDrugDetail"></Drugs:Message>

                </ContentTemplate>

            </telerik:RadPanelItem>

        </Items>

    </telerik:RadPanelBar>

  

                    </ItemTemplate>
</asp:DataList>

Javascript code:

var pbDrugs;
var pbDrugs2;
var isExpanded = true;

function pageLoad() {

 //pbDrugs2 = document.getElementById("ctl00_bodyPlaceHolder1_dlDrugDetails_ctl00_pbDrugs2");
    pbDrugs = $find("<%= pbNotes.ClientID %>");  //attempting to find a panelbar within the datalist this way results in a compile error

}

//this way seems to find the panel bar correctly
function pbDrugs2_OnLoad(sender) {
    pbDrugs2 = sender;
}

function toggleDrugSections() {

 var item = pbDrugs2.findItemByValue("piDrugDetail");

            if (item) {
                //if (!item.get_expanded()) {  --this method is always returning true
                if (!isExpanded) {   //replaced with javascript variable which does change
                    item.expand();
                    isExpanded = true;
                }
                else {
                    item.collapse();   //this never collapses the panel at all
                    isExpanded = false;
                }
            }
            else {
                alert("Item not found.");
            }
        }

//called from a different panelbar (inside the datalist as well).  Always getting called correctly.
        function pbApplicantDetail_ItemClicked(sender, eventArgs) {
            toggleDrugSections();
        }

[Kate]

Hi Scott,

The code that you are using does not work since the ID of the control does not render in the same way when it is in a Template of a DataList. Therefore you will need a different approach for finding the PanelBar control when it is placed in a template. For example using the following code you can find any element that contains the pbDrugs2 letters (that is the id if the RadPanelBar) in its ID:

<script type="text/javascript">
        function pbDrugs2_OnLoad(sender, args) {
            alert($telerik.$("#[id*='DataList1_ctl*_pbDrugs2']").text());
        }
    </script>

Greetings,
Kate
the Telerik team