$Find cannot find Grid which is in a NestedView Template

[Kevin]

Hi,

I have a page which has a master grid and then in a NestedViewTemplate I have two PageViews which have grids as well.
From Javascript though, I cannot reference the grids in the PageViews using the $find command. 
Any idea on how to resolve this?

Code is below:

Here is the code for the Master Grid and PageViews:

<div style="margin-left:10px;width:100%">
        <telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource8" DataTextField="coachname" DataValueField="coachid" AutoPostBack="true" Skin="Forest" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"></telerik:RadComboBox>
    <asp:SqlDataSource runat="server" ID="SqlDataSource8" ConnectionString='<%$ ConnectionStrings:BHDPortalsConnectionString %>' SelectCommand="Select Distinct(FirstName + ' ' + LastName) as CoachName, CoachID from aspnet_users where FirstName + LastName &lt;&gt; ''"></asp:SqlDataSource>
        
        <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
            runat="server" AutoGenerateColumns="False" AllowSorting="True"
            AllowPaging="True" GridLines="None" OnItemCreated="RadGrid1_ItemCreated" Width="98%"
            OnItemCommand="RadGrid1_ItemCommand" CellSpacing="0" AutoGenerateEditColumn="True" OnUpdateCommand="RadGrid1_UpdateCommand" AllowFilteringByColumn="true" OnItemDataBound="RadGrid1_ItemDataBound">

       

        <PagerStyle Mode="NumericPages"></PagerStyle>
        <GroupingSettings CaseSensitive="false"></GroupingSettings>

        <MasterTableView DataSourceID="SqlDataSource1" AllowMultiColumnSorting="True" EditMode="InPlace" Name="ParentGrid"

            GroupLoadMode="Server">

            <NestedViewTemplate>

                <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">

                    <telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">

                        <Tabs>

                            <telerik:RadTab runat="server" Text="Appointments" PageViewID="PageView1">

                            </telerik:RadTab>

                            <telerik:RadTab runat="server" Text="Reports" PageViewID="PageView2">

                            </telerik:RadTab>


                        </Tabs>

                    </telerik:RadTabStrip>

                    <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">

                        <telerik:RadPageView runat="server" ID="PageView1">

                            <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("PatientID") %>'

                                Visible="false" runat="server"></asp:Label>

                            <telerik:RadGrid runat="server" ID="AppointmentsGrid" DataSourceID="SqlDataSource2" ShowFooter="true" OnItemCommand="AppointmentsGrid_ItemCommand" OnDataBound="AppointmentsGrid_DataBound" OnItemDataBound="AppointmentsGrid_ItemDataBound"

                                AllowSorting="true" EnableLinqExpressions="false">

                                <MasterTableView ShowHeader="true" AutoGenerateColumns="False" AllowPaging="true" PageSize="7" HierarchyLoadMode="ServerOnDemand">

                                    <Columns>
                                        <telerik:GridButtonColumn FilterControlAltText="Filter column column"    UniqueName="CancelBtn" Text="Cancel" CommandName="cancelBtn"
                                            HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        </telerik:GridButtonColumn>
                                        <telerik:GridBoundColumn SortExpression="ID" HeaderText="Id" DataField="ID" UniqueName="ID" DataType="System.Int32" 
                                            FilterControlAltText="Filter ID Column" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        </telerik:GridBoundColumn> 
                                        <telerik:GridBoundColumn SortExpression="Start" HeaderText="Start"
                                            DataField="Start" UniqueName="Start" DataType="System.DateTime" FilterControlAltText="Filter Start column"
                                            HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Duration" HeaderText="Duration"
                                            DataField="Duration" UniqueName="Duration" DataType="System.DateTime" FilterControlAltText="Filter Duration column"
                                            HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="Appointment_Type" HeaderText="Appointment Type"
                                            DataField="Appointment_Type" UniqueName="Appointment_Type" FilterControlAltText="Filter Appointment Type column"
                                            HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        </telerik:GridBoundColumn>

                                        <telerik:GridBoundColumn UniqueName="AppointmentStatus" DataField="AppointmentStatus" HeaderText="AppointmentStatus"
                                            SortExpression="AppointmentStatus" DataType="System.Int32" FilterControlAltText="Filter AppointmentStatus column"
                                            HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

                                        </telerik:GridBoundColumn>

                                        <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="CoachNotes"
                                            HeaderText='Notes' Text="Notes" UniqueName="CoachNotes" ImageUrl="~/Images/notes.png" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                                            <HeaderStyle Width="20px" />
                                            <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                        </telerik:GridButtonColumn>
                                    </Columns>
                                            
                                    
                                
                                    </MasterTableView>
                            </telerik:RadGrid>

                            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString='<%$ ConnectionStrings:BHDPortalsConnectionString %>' SelectCommand="SELECT [Start], [End], DATEDIFF(minute,[Start],[End]) as Duration, [Subject] as Appointment_Type, [AppointmentStatus], ID, isnull(PatientCoachNoteID,0) as PatientCoachNoteID FROM [BHDAppointments] WHERE ([ClientUserID] = @ClientUserID)">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Name="ClientUserID" Type="Int32"></asp:ControlParameter>
                                </SelectParameters>
                            </asp:SqlDataSource>

                            

                        </telerik:RadPageView>

                        <telerik:RadPageView runat="server" ID="PageView2">
                            <asp:Label ID="Label2" Font-Bold="true" Font-Italic="true" Text='<%# Eval("PatientID") %>'
                            Visible="false" runat="server"></asp:Label>

                        <telerik:RadGrid runat="server" ID="ReportsGrid" DataSourceID="SqlDataSource3" ShowFooter="true" OnItemCommand="ReportsGrid_ItemCommand" OnItemDataBound="ReportsGrid_ItemDataBound"
                            AllowSorting="true" EnableLinqExpressions="false" MasterTableView-DataKeyNames="PatientID">
                            <MasterTableView ShowHeader="true" AutoGenerateColumns="False" AllowPaging="true" PageSize="7" HierarchyLoadMode="ServerOnDemand">
                            <Columns>
                                
                                <telerik:GridBoundColumn SortExpression="Accession" HeaderText="Accession"
                                    DataField="Accession" UniqueName="Accession" FilterControlAltText="Filter Accession column"
                                    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="OriginalOrderDate" HeaderText="Original Order Date"
                                    DataField="OriginalOrderDate" UniqueName="OriginalOrderDate" DataType="System.DateTime" FilterControlAltText="Filter OriginalOrderDate column"
                                    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="LabReport"
                                    HeaderText='Lab Report' Text="Lab Report" UniqueName="LabReport" ImageUrl="~/Images/notes.png" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                                    <HeaderStyle Width="20px" />
                                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                </telerik:GridButtonColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="PLPFile"
                                    HeaderText='PLP' Text="PLP" UniqueName="PLPFile" ImageUrl="~/Images/notes.png" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                                    <HeaderStyle Width="20px" />
                                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                </telerik:GridButtonColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Questionaire"
                                    HeaderText='Questionaire' Text="Questionaire" UniqueName="Questionaire" ImageUrl="~/Images/notes.png" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                                    <HeaderStyle Width="20px" />
                                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                                </telerik:GridButtonColumn>
                                <telerik:GridButtonColumn ButtonType="PushButton" CommandName="Action"
                                    HeaderText="Action" Text="Unlock" UniqueName="Action" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                                    <HeaderStyle Width="20px" />
                                    <ItemStyle HorizontalAlign="Center" />
                                 </telerik:GridButtonColumn>
                                <telerik:GridBoundColumn SortExpression="PLPFileName" HeaderText="PLP File Name"
                                    DataField="PLPFileName" UniqueName="PLPFileName" FilterControlAltText="Filter PLPFileName column"
                                    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" EmptyDataText="">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="PLPCreatedDate" HeaderText="PLP Created Date"
                                    DataField="PLPCreatedDate" UniqueName="PLPCreatedDate" DataType="System.DateTime" FilterControlAltText="Filter OriginalOrderDate column"
                                    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="QuestionaireStatus" HeaderText="QuestionaireStatus"
                                    DataField="QuestionaireStatus" UniqueName="QuestionaireStatus" DataType="System.Int32" FilterControlAltText="Filter QuestionaireStatus column"
                                    HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>
                            </Columns>
                            </MasterTableView>
                            </telerik:RadGrid>
                        
                            <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString='<%$ ConnectionStrings:BHDPortalsConnectionString %>' SelectCommand="Select P.PatientID, P.Accession, P.OriginalOrderDate, isnull(PLPFileName,'') as PLPFileName, P.PLPCreatedDate, case when A.cnt > 0 then 1 else 0 end as QuestionaireStatus
FROM PatientAccessionReports P (nolock)
LEFT JOIN (Select PatientID, Accession, Count(*) as cnt from tblAnswers (nolock) group by PatientID, Accession) A 
on A.PatientID = P.PatientID and A.Accession = P.Accession
where P.PatientID = @PatientID">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label2" PropertyName="Text" Name="PatientID" Type="String"></asp:ControlParameter>
                                </SelectParameters>
                            </asp:SqlDataSource>
                        
                        </telerik:RadPageView>

                        

                    </telerik:RadMultiPage>

                </asp:Panel>

            </NestedViewTemplate>

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

            <Columns>

                

                <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name"

                    DataField="FirstName" UniqueName="FirstName" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn SortExpression="Lastname" HeaderText="Last Name"

                    DataField="Lastname" UniqueName="Lastname" FilterControlAltText="Filter Lastname column" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn SortExpression="BestContactPhoneNumber" HeaderText="Contact Phone"

                    DataField="BestContactPhoneNumber" UniqueName="BestContactPhoneNumber" FilterControlAltText="Filter BestContactPhoneNumber column" ReadOnly="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn SortExpression="PatientID"

                    HeaderText="Patient ID" DataField="PatientID" UniqueName="PatientID" FilterControlAltText="Filter PatientID column" ReadOnly="true" ForceExtractValue="InEditMode" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">

                </telerik:GridBoundColumn>

                <telerik:GridBoundColumn SortExpression="AppointmentCount"
                    HeaderText="# of Appointments" DataField="AppointmentCount" UniqueName="AppointmentCount" FilterControlAltText="Filter AppointmentCount column" HeaderStyle-Width="5px" HeaderStyle-HorizontalAlign="Center" ReadOnly="true" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">
                    
                </telerik:GridBoundColumn>

                
                <telerik:GridTemplateColumn HeaderText="Coach Id" UniqueName="CoachID" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains">
                    <ItemTemplate>
                        <%#DataBinder.Eval(Container.DataItem,"coachname")%>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadComboBox runat="server" ID="RadComboBox2" DataTextField="Name" Skin="Forest" AutoPostBack="true" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                            DataValueField="CoachId" DataSourceID="CoachUsers" SelectedValue='<%#Bind("CoachId") %>'>
                        </telerik:RadComboBox>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>

                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Book"
                    HeaderText='Book' Text="Book" UniqueName="Book" ImageUrl="~/Images/book-icon.png" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="Small" HeaderStyle-HorizontalAlign="Center">
                    <HeaderStyle Width="20px" />
                    <ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
                </telerik:GridButtonColumn>
            </Columns>

<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>

<PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>

        </MasterTableView>

        <ClientSettings AllowDragToGroup="true">

        </ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

    </telerik:RadGrid>

        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:BHDPortalsConnectionString %>" SelectCommand="SELECT   pi.FirstName, pi.Lastname,  pi.BestContactPhoneNumber, pi.PatientID, dbo.fnCountAppointments(pi.PatientID) as AppointmentCount,  pi.CoachId, aspnet_Users.FirstName + ' ' + aspnet_Users.LastName as [coachname], aspnet_Users.CurrentProviderBHDUserID,  aspnet_Users.BHDUserID
FROM      aspnet_Users INNER JOIN
                         tblPatientInfo AS pi ON aspnet_Users.CoachID = pi.CoachId
WHERE pi.CoachId = @coachid"
            runat="server">
            <SelectParameters>
                <asp:ControlParameter ControlID="hdcoachid" Name="coachid" PropertyName="Value" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="CoachUsers" runat="server" ConnectionString='<%$ ConnectionStrings:BHDPortalsConnectionString %>' SelectCommand="Select distinct coachid, FirstName + ' ' + LastName as [Name] from [aspnet_Users] (nolock)"></asp:SqlDataSource>
</div>

This is the code for the Javascript call that doesn't see the AppointmentsGrid. 

This works fine and sees the RadGrid1
var grid = $find("<%=RadGrid1.ClientID %>").get_masterTableView().NestedTable().get_dataItems()[index]; 

This code won't work. Can't see the Appointments Grid.
var grid = $find("<%=AppointmentsGrid.ClientID %>").get_masterTableView().NestedTable().get_dataItems()[index];

Thanks,

Kevin

[Andrey]

Hi,

As I stated in the support ticket you have opened, what you are doing with "<%=AppointmentsGrid.ClientID %>" syntax, you are "telling" the framework, go find the control with ID equal to "AppointmentsGrid", get its ClientID and pass it as argument to the function. However, the only way for the framework to find controls is using the FindControl method. But as you could verify from the MSDN the FindControl method searches for the control only in the current NamingContainer. When executed from mark-up the current NamingContainer is the Page itself. This is the reason why you find the master Grid control which is directly located on the Page, but the inner Grid is not found.

There are multiple items in RadGrid that are NamingContainers and you need to reference the one that is direct parent of the RadGrid that you are searching for. This could be done in couple of way, you could reference the whole hierarchy structure of objects in the $find() function parameter, however this approach is not recommended. The easier approach is to hook the ItemDataBound event of the master Grid and define a hidden field control on the page. Next, set the Name property of the MasterTableView object of the inner Grid to some value and check for this value in the ItemDataBound by using the following code:

Copy Code

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if (e.Item.OwnerTableView.Name == "NameOfYourChoice")
    {
        hdnField.Value = e.Item.OwnerTableView.OwnerGrid.ClientID;
    }
}

Then you could use the value of the HiddenField control as argument in the $find() function as follows:

Copy Code

var innerGrid = $find(hdnField.Value);

The declaration of the HiddenField control is as follows:

Copy Code

<asp:HiddenField ID="hdnField" runat="server" />

Greetings,
Andrey
the Telerik team