$find issue in IE8

[KO]

So lately I have been working on getting our website cross browser compatible, and I just ran into a rather noticeable problem with one of our .ascx controls. The control's entire XML markup is shown below. Everything seems to be working good in the other internet browsers, but in internet explorer the $find just returns null!

Returns null here:

<telerik:RadScriptBlock ID="AddressBookScriptBlock" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {


            $("#<%= AddressGridDiv.ClientID %>").hide();


            AddressBook_InitializeClientSide(
                $find("<%= AddressBookListView.ClientID %>"),
                $("#<%= SelectedContacts.ClientID %>"));


        });
    </script>
</telerik:RadScriptBlock>

AddressBook.ascx:

<table id="AddressTable" style="width: 100%" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top">
            <telerik:RadButton ID="ToButton" runat="server" Text="" Width="60px"
                AutoPostBack="false" OnClientClicked="ToggleAddressGrid" />
        </td>
        <td style="width: 100%; padding-left: 5px; padding-bottom: 5px; padding-right: 5px">
            <telerik:RadListView ID="AddressBookListView" runat="server" DataKeyNames="name,id"
                ClientDataKeyNames="name,id" ClientIDMode="AutoID" Width="100%" >
                <ClientSettings>
                    <DataBinding>
                        <LayoutTemplate>
                            <div ID="#= owner.get_id() #_itemContainer" class="DataLayoutTemplate"
                                onclick="ToggleAddressGrid(this, event, '#= owner.get_id() #')" />
                        </LayoutTemplate>
                        <EmptyDataTemplate>
                            <div class="TelerikFont EmptyDataTemplate" runat="server">
                                Click here or use the button to add contacts...
                            </div>
                        </EmptyDataTemplate>
                        <ItemTemplate>
                            <table runat="server" class="AddressContact TelerikFont" cellpadding="0" cellspacing="0"
                                onclick="AddressBook_DeSelectFromAddressGrid('#= owner.get_id() #','#= id #');">
                                <tr>
                                    <td style="padding-left: 5px; padding-right: 5px;">
                                        #= name #
                                    </td>
                                    <td style="width: 0; display: none; overflow: visible">
                                        #= id #
                                    </td>
                                    <td style="padding-right: 5px;">
                                        <img src="#= ResolveClientUrl('~/Main/Content/Images/Icons/msg_delete.gif') #" />
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </DataBinding>
                </ClientSettings>
            </telerik:RadListView>
            <div style="width: 100%; position: relative;">
            <div runat="server" id="AddressGridDiv" class="AddressGridDiv">
                <telerik:RadAjaxLoadingPanel ID="AddressBookLoadingPanel" runat="server" />
                <telerik:RadAjaxPanel ID="AddressGridAjaxPanel" runat="server" LoadingPanelID="AddressBookLoadingPanel">
                    <telerik:RadGrid ID="AddressBookGrid" runat="server" AutoGenerateColumns="false" AllowFilteringByColumn="true"
                        AllowSorting="true" AllowPaging="true" OnNeedDataSource="AddressGrid_NeedsDataSource"
                        AllowMultiRowSelection="true">
                        <MasterTableView DataKeyNames="Id,Name" ClientDataKeyNames="Id,Name" AllowNaturalSort="false" Width="100%">
                        <SortExpressions>
                            <telerik:GridSortExpression  />
                        </SortExpressions>
                            <Columns>
                                <telerik:GridClientSelectColumn>
                                    <HeaderStyle Width="40px" />
                                </telerik:GridClientSelectColumn>
                                <telerik:GridBoundColumn HeaderText="Name" SortExpression="Name" DataField="Name"
                                    FilterControlWidth="150" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                                    ShowFilterIcon="false" />
                                <telerik:GridBoundColumn SortExpression="ParentCawClient.Name" DataField="ParentCawClient.Name"
                                    HeaderText="Client Name" FilterControlWidth="150px" ShowFilterIcon="false"
                                    CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" />
                                <telerik:GridBoundColumn HeaderText="Email Address" SortExpression="Email" DataField="Email"
                                    FilterControlWidth="150" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                                    ShowFilterIcon="false" />
                            </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Selecting AllowRowSelect="true" />
                            <ClientEvents OnRowSelected="AddressBook_AddRowToListView"
                                OnRowDeselected="AddressBook_RemoveRowFromListView"
                                OnGridCreated="AddressBook_InitGridContacts" />
                            <DataBinding EnableCaching="true" />
                        </ClientSettings>
                        <GroupingSettings CaseSensitive="false" />
                    </telerik:RadGrid>
                </telerik:RadAjaxPanel>
            </div>
            </div>
        </td>
    </tr>
</table>

<asp:HiddenField ID="SelectedContacts" runat="server" Value="" ClientIDMode="AutoID" />

<telerik:RadScriptBlock ID="AddressBookScriptBlock" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {

            $("#<%= AddressGridDiv.ClientID %>").hide();

            AddressBook_InitializeClientSide(
                $find("<%= AddressBookListView.ClientID %>"),
                $("#<%= SelectedContacts.ClientID %>"));

        });
    </script>
</telerik:RadScriptBlock>

Page_Load code behind for the control:

protected void Page_Load(object sender, EventArgs e)
        {
            AddressBookListView.ClientSettings.DataBinding.ItemPlaceHolderID = AddressBookListView.ClientID +
                                                                               "_itemContainer";
            ClientIDMode = ClientIDMode.AutoID;
        }

The page that contains the .ascx control has no managers of any kind, and ends up getting loaded from the default page that has RadWindowManager:

<telerik:RadWindowManager  ID="ViewEditMessageWindow" ShowContentDuringLoad="false" VisibleStatusbar="false"
            ReloadOnShow="true" runat="server" EnableShadow="true" KeepInScreenBounds="true"
            Left="10px" Top="10px" MinHeight="600px" MinWidth="800px">
        <Windows>
            <telerik:RadWindow ID="ViewMessage" runat="server" Behaviors="Close" NavigateUrl="" MinHeight="600" MinWidth="800"
                Modal="true" Overlay="true" />
        </Windows>
    </telerik:RadWindowManager>

and the window getting created from this default page's javascript

function NewMessage(sender, eventArgs) {
                var oWnd = radopen("<%= Navigator.NewMessage() %>", "ViewEditMessageWindow");
            }

We need to get the find to work in IE V8.

[Maria Ilieva]

Hi Kelson,

Please try to set a small timeout in the client code before calling $find. I suppose there could be an issue in the time for which the controls scripts are loaded in IE8 which a bit slower browser. Also please note that the   $(document).ready will ne fire after ajax which is generic framework behaviour. Therefore in case you need to keep the RadAjaxPanel around the controls on the page I would suggest you to use the client pageLoad event for triggering the needed client logic.

Greetings,
Maria Ilieva
the Telerik team

[KO]

Yep that was it thank you Maria! For others that come across this and need a code example here is the solution in slightly more depth:

http://www.telerik.com/community/forums/aspnet-ajax/mvc/document-ready-and-radcontrol-s-availability.aspx