$Find cannot find Grid which is in a NestedView Template

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    15 posts
    Member since:
    Mar 2013

    Posted 03 Apr 2013 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 08 Apr 2013 Link to this post

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