How to use $find() with the OnResponseEnd event

[Josh Horton]

I have a RadAjaxManager and an event handler for the OnResponseEnd event. In this event I am trying to use the $find() method to get the RadGrid object. I also must state that it is being used in a SharePoint environment. The problem is that when the page is being loaded it can find the RadGrid successfully, but in the OnResponseEnd event it returns a null. I have tried placing the function in a RadScriptBlock, as well as a RadCodeBlock. I have tried placing the scripts inside and outside the panel that the grid is in, which is updating when the grids selectedindexchanged event is fired. The code seems to work perfectly in a web-app, but when placed in the SharePoint environment it breaks. I have seen some blogs and posts where the client id is the problem, but in this situation the id is correct. As stated before, the find method does return the object on initial page load. But when an ajax update occurs, it's like the grid is not initialized until after the ResponseEnd event fires. 

Please help, the deadline is fast approaching in a few hours. I will greatly appreciate any advice. Thanks.

    <rad:RadAjaxManager ID="AjaxManager1" runat="server">
        <AjaxSettings>
            <rad:AjaxSetting AjaxControlID="grdCustomerAssignments">
                <UpdatedControls>
                    <rad:AjaxUpdatedControl ControlID="pnlCustomerAssignments"/>
                </UpdatedControls>
            </rad:AjaxSetting>
            <rad:AjaxSetting AjaxControlID="grdCustomerAssignments">
                <UpdatedControls>
                    <rad:AjaxUpdatedControl ControlID="pnlDetails"  />
                </UpdatedControls>
            </rad:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnResponseEnd="ResponseEnd" OnRequestStart="RequestStart" />

<asp:Panel ID="pnlCustomerAssignments" runat="server" >
        <rad:RadGrid ID="grdCustomerAssignments" runat="server" Skin="WebBlue" AutoGenerateColumns="false" AllowMultiRowSelection="false"
            OnNeedDataSource="grdCustomerAssignments_NeedDataSource"
            OnSelectedIndexChanged="grdCustomerAssignments_SelectedIndexChanged">

            <ClientSettings EnablePostBackOnRowClick="true" >
                    <ClientEvents OnRowSelected="RowSelected"/>
                    <Scrolling AllowScroll="true" ScrollHeight="350" UseStaticHeaders="true" SaveScrollPosition="true" />
                    <Selecting AllowRowSelect="true" />
                    <Resizing AllowColumnResize="true" />
            </ClientSettings>

            <MasterTableView DataKeyNames="ID" >

                <HeaderStyle Wrap="false" HorizontalAlign="Center" VerticalAlign="Middle" Font-Bold="true" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="false" />
                <AlternatingItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="false" />

                <NoRecordsTemplate>
                    <div style="font-size:80%; color:Maroon;">No Items Were Found</div>
                </NoRecordsTemplate>

            </MasterTableView>

        </rad:RadGrid>


    </asp:Panel>

        <rad:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var grid1;
            Sys.Application.add_load(function() {
                grid1 = $find('<%= grdCustomerAssignments.ClientID %>');
                var tmp = "asdf";
            });
            var SelectedItemIsReseting = false;
            var SelectedIndexes = new Object();

            function RowSelected(sender, eventArgs) {
                if (!SelectedItemIsReseting) {
                    SelectedIndexes = eventArgs.get_itemIndexHierarchical();
                }
            }

            function RequestStart(sender, eventArgs) {
                if (SelectedItemIsReseting) {
                    eventArgs.set_cancel(true);
                }
            }



        </script>
    </rad:RadCodeBlock>

            <rad:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">


                function ResponseEnd(sender, eventArgs) {
                    SelectedItemIsReseting = true;
                    var gridID = eventArgs.get_eventTargetElement().id;
                    var grid = $find(gridID);
                        if (!grid) alert("No Grid");
                        var MasterTableView = grid.get_masterTableView();
                        if (!MasterTableView) alert("No Table");
                        MasterTableView.selectItem(MasterTableView.get_dataItems()[SelectedIndexes].get_element());
                        SelectedItemIsReseting = false;
                        clearTimeout(t);

                }
            </script>
        </rad:RadScriptBlock>

[Josh Horton]

Anyone???

[Yavor]

Hello Josh,

The best option in such a setup is to use the GridCreated client side event handler, to get a reference to the grid control, via the sender parameter (the first parameter). This reference can be stored in a global variable, which can then be accessed in any client side handler.
I hope this is a feasible alternative in your case.

Sincerely yours,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.