RadAjaxManager, RadTooltip Manager and RadGrid Problem

[Craig]

Hi,

I am having a problem with RadAjaxManager and when displaying an Ajaxified ToolTip in a rad grid.  It is based on this example http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx .  The OnAjaxUpdate event fires but the user control doesnt display in the tooltip (the tooltip just disappears).

I believe the issue is coming with the asp panel (we needed this as it didnt display a loading panel).

Regards

Can anyone help. Code is as follows.

<%@ Page Title="" Language="C#" MasterPageFile="~/App_Templates/Local/WorkforceLayoutContainer.Master" AutoEventWireup="true" CodeBehind="AllJobsNew.aspx.cs" Inherits="WorkforceManagementModule.orders.AllJobsNew" %>
<%@ Register Src="~/user_controls/FilterButtonsControl.ascx" TagName="FilterButtons"
    TagPrefix="user" %>
<%@ Register src="~/user_controls/LazyDropdown.ascx" tagname="LazyDropdown" tagprefix="user" %>
<asp:Content ID="Content1" ContentPlaceHolderID="InstanceHeader" runat="server">
    <title>PHJones | Pilot Portal</title>
    <link href="/styles/global.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $('#tablewrapper').width(($(window).width() - 240) + 'px');


            $('#GlobalContent_InstanceContent_filterButtons_btnFind').bind('click', function () { Validation(); });


            $('#navsliderbutton').bind('click', function () {




                if (menuHidden) {
                    $('#tablewrapper').animate({ width: ($(window).width() - 50) + 'px' }, 'slow');
                    $('#rgMasterTable').animate({ width: ($(window).width() - 50) + 'px' }, 'slow');
                }
                else {
                    $('#tablewrapper').animate({ width: ($(window).width() - 240) + 'px' }, 'slow');
                    $('#rgMasterTable').animate({ width: ($(window).width() - 240) + 'px' }, 'slow');
                }


            });


            $(window).resize(function () {
                if (menuHidden) {
                    $('#tablewrapper').animate({ width: ($(window).width() - 50) + 'px' }, 'slow');
                    $('#rgMasterTable').animate({ width: ($(window).width() - 50) + 'px' }, 'slow');
                }
                else {
                    $('#tablewrapper').animate({ width: ($(window).width() - 240) + 'px' }, 'slow');
                    $('#rgMasterTable').animate({ width: ($(window).width() - 240) + 'px' }, 'slow');
                }
            });


            var hdnValue = $("#<%= hdnShowAdvancedFilter.ClientID %>").val();


            if (hdnValue == 'false') {
                $('#advancedfilter').attr('class', 'advancedfilter-hidden');
            } else {
                $('#advancedfilter').attr('class', 'advancedfilter-shown');
            }


            function toggleAdvancedFilter() {
                if ($('#advancedfilter').attr('class') == 'advancedfilter-hidden') {
                    $('#advancedfilter').attr('class', 'advancedfilter-shown');
                }
                else {
                    $('#advancedfilter').attr('class', 'advancedfilter-hidden');
                }
            }


            function Validation() {




            }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="InstanceContent" runat="server"> 
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" Width="750"
        Height="550" Skin="WebBlue">
    </telerik:RadWindowManager>
    <telerik:RadWindow ID="RadWindow1" runat="server" Width="720" Height="580" VisibleOnPageLoad="false"
        ShowContentDuringLoad="false" KeepInScreenBounds="true">
    </telerik:RadWindow>


    <telerik:RadAjaxLoadingPanel ID="LoadPanel1" runat="server" Skin="WebBlue"></telerik:RadAjaxLoadingPanel>
   <telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="ManualClose"
        Width="250" Height="350" runat="server" EnableShadow="true" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
        Position="MiddleRight" Skin="WebBlue">
    </telerik:RadToolTipManager>
 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnlFilter">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlFilter" LoadingPanelID="LoadPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadGridJobNumber" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    <telerik:AjaxUpdatedControl ControlID="AllJobsLazyToolTip" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGridJobNumber">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridJobNumber" LoadingPanelID="LoadPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    <telerik:AjaxUpdatedControl ControlID="AllJobsLazyToolTip" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadToolTipManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridJobNumber"/>
                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" />
                    <telerik:AjaxUpdatedControl ControlID="AllJobsLazyToolTip" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function RequestStart(sender, eventArgs) {
            var eventTarget = eventArgs.get_eventTarget();
            alert(eventTarget);
        }
    </script>
</telerik:RadCodeBlock>


    <asp:Panel ID="pnlFilter" runat="server">
        <div class="SearchForm">
            <asp:HiddenField ID="hdnShowAdvancedFilter" runat="server" Value="false" />
            <div class="ContentLeft">
                <p>
                    <asp:Label ID="lblJobNumber" runat="server" Text="Job Number" CssClass="formLabel" />
                    <span class="commenttext">Enter the Pilot or Client Job Number</span>
                    <asp:TextBox ID="txtJobNumber" runat="server" CssClass="formFieldText" Style="width: 90%;" />
                </p>
            </div>
            <div class="ContentMiddle">
                <p>
                    <asp:Label ID="lblRepairOrderType" runat="server" Text="Work Order Type" CssClass="formLabel" />
                    <span class="commenttext">Select Job Type</span>
                    <user:LazyDropdown ID="ddlJobType1" runat="server" AllowCustomText="true" Filter="StartsWith" AutoPostBack="true"></user:LazyDropdown>
                   
                    <p>
                    </p>
                   
                </p>
            </div> 
            <div class="ContentMiddle"> 
                <p>
                    <asp:Label ID="lblJobStatus" runat="server" CssClass="formLabel" Text="Job Status" />
                    <span class="commenttext">Select Job Status</span>
                    <user:LazyDropdown ID="ddlJobStatus1" runat="server" AllowCustomText="true" Filter="StartsWith" AutoPostBack="true"></user:LazyDropdown>
                    <p>
                    </p>
                </p>
            </div>
            
        <div class="ContentMiddle" id="NALevel" runat="server" visible="false">
            <p>
                <asp:Label ID="lblNALevel" runat="server" CssClass="formLabel" Text="NA Level" />
                <span class="commenttext">Select NA Level</span>
                <user:LazyDropdown ID="ddlNALevel1" runat="server" AllowCustomText="true" Filter="StartsWith"></user:LazyDropdown>
                <p>
                </p>
            </p>
        </div>
        <div class="ContentRight">
            <p>
                <asp:Label ID="lblAddress" runat="server" Text="Search" CssClass="formLabel" />
                <span class="commenttext">Enter the Address, Postcode or Propref</span>
                <asp:TextBox ID="txtAddressSearch" runat="server" CssClass="formFieldText" Style="width: 90%;" />
            </p>
        </div>
       
        <a href="#" onclick="javascript:toggleAdvancedFilter();" class="advancedfilter-button">Advanced Filter</a>
    </div>
    <div id="advancedfilter" class="advancedfilter-hidden">
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label1" runat="server" CssClass="formLabel" Text="Origin" />
                <span class="commenttext">Select Job Origin</span>
                <user:LazyDropdown ID="ddlOrigin1" runat="server" DataTextField="RepairOrigin" DataValueField="RepairOrigin" AllowCustomText="true" Filter="StartsWith" Width="100px"></user:LazyDropdown>
           
                <p>
                </p>
           
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label2" runat="server" CssClass="formLabel" Text="Priority"></asp:Label>
                <span class="commenttext">Select Priority</span>
                <user:LazyDropdown ID="ddlPriority1" runat="server" AllowCustomText="true" DataTextField="Code" DataValueField="Code" Filter="StartsWith"></user:LazyDropdown>
               
                <p>
                </p>
               
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label3" runat="server" CssClass="formLabel" Text="Trade Code" />
                <span class="commenttext">Select Trade Code</span>
                <user:LazyDropdown ID="ddlTradeCode1" runat="server" DataTextField="Description" DataValueField="Code" AllowCustomText="true" Filter="StartsWith"></user:LazyDropdown>
               
                <p>
                </p>
               
            </p>
        </div>
         <div class="ContentMiddle">
            <p>
                <asp:Label ID="lblPropClass" runat="server" CssClass="formLabel" Text="Property Class" />
                <span class="commenttext">Select Property Class</span>
                 <user:LazyDropdown ID="ddlPropClass1" runat="server" AllowCustomText="true" Filter="StartsWith"  Width="120px"></user:LazyDropdown>
             
                <p>
                </p>
             
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label4" runat="server" CssClass="formLabel" Text="Date Booked" />
                <span class="commenttext">Select Date</span>
                <telerik:RadDatePicker ID="txtBookedDate" runat="server" Style="margin-left: 15px; margin-top:-15px !important;" Skin="WebBlue"/>
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label5" runat="server" CssClass="formLabel" Text="Target From Date" />
                <span class="commenttext">Select From Date</span>
                <telerik:RadDatePicker ID="txtTargetDateFrom" runat="server" Style="margin-top:-15px !important; margin-left: 15px;" Skin="WebBlue"/>
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="Label6" runat="server" CssClass="formLabel" Text="Target To Date" />
                <span class="commenttext">Select To Date</span>
                <div style="clear: both;"></div>
                <telerik:RadDatePicker ID="txtTargetDateTo" runat="server"  style="margin: -15px 0 0 14px;" Skin="WebBlue" />
                
                <p>
                </p>
                
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="lblTargetCreate" runat="server" Text="Target Date" CssClass="formLabel" />
                <span class="commenttext">Select choice</span>
                <asp:RadioButtonList ID="rdTargetCreate" runat="server" style="margin: -15px 0 0 14px;">
                    <asp:ListItem Text="Attend By" Value="Near" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Complete By" Value="Complete"></asp:ListItem>
                </asp:RadioButtonList>
            </p>
        </div>
        <div class="ContentMiddle">
            <p>
                <asp:Label ID="lblRaisedDate" runat="server" Text="Raised Date" CssClass="formLabel" />
                <span class="commenttext">Filter by raised date</span>
                <telerik:RadDatePicker ID="rdRaisedDate" runat="server"  style="margin: -15px 0 0 14px;" Skin="WebBlue" />
            </p>
        </div>
    </div>
  
    
    <user:FilterButtons ID="filterButtons" runat="Server" OnFindEvent="btnFind_Click" ShowClear="True" /></asp:Panel>    
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue" />


    
    <telerik:RadGrid ID="RadGridJobNumber" runat="server" AllowSorting="true" AutoGenerateColumns="false"
            AllowCustomPaging="true" AllowPaging="True" PageSize="50" Skin="WebBlue" GridLines="None"
            OnNeedDataSource="RadGridJobNumber_NeedDataSource" OnItemDataBound="RadGridJobNumber_ItemDataBound"
            Width="100%">
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView DataKeyNames="OrderID, Property.PropRef, Contract" OverrideDataSourceControlSorting="true">
                <Columns>
                    <telerik:GridButtonColumn CommandName="ViewProperty" ButtonType="ImageButton" ImageUrl="~/images/icons/house.png"
                        Text="View Property" HeaderText="" Reorderable="False">
                        <ItemStyle CssClass="ImageOptionGrid" />
                        <HeaderStyle Width="30" />
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn CommandName="Schedule" ButtonType="ImageButton" ImageUrl="~/images/icons/calendar_add.png"
                        Text="Schedule Job" HeaderText="" Reorderable="False" UniqueName="Schedule">
                        <ItemStyle CssClass="ImageOptionGrid" />
                        <HeaderStyle Width="30" />
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn CommandName="EditJob" ButtonType="ImageButton" ImageUrl="~/images/icons/application_form_edit.png"
                        Text="Edit Works Order" HeaderText="" Reorderable="False">
                        <ItemStyle CssClass="ImageOptionGrid" />
                        <HeaderStyle Width="30" />
                    </telerik:GridButtonColumn>
                    <telerik:GridTemplateColumn DataField="OrderID" AllowFiltering="false" HeaderText="Job No"
                        SortExpression="ORDERID" UniqueName="ORDERID">
                        <ItemTemplate>
                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("OrderID","ViewOrderNew.aspx?OrderID={0}") %>'><%# DataBinder.Eval(Container, "DataItem.OrderID")%></asp:HyperLink>
                        </ItemTemplate>
                        <HeaderStyle Width="40" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="ClientRef" AllowFiltering="false" HeaderText="Client Job Number"
                        UniqueName="ClientJobNumber">
                        <HeaderStyle Width="80" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Property.FullAddress" HeaderText="Address" UniqueName="Address">
                        <HeaderStyle Width="100" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn FilterControlWidth="40" DataField="Status" HeaderText="Job Status" AllowFiltering="true" SortExpression="Status"
                        UniqueName="JobStatus">
                        <ItemTemplate>
                            <%#(string)Eval("Status")=="NA" ? string.Format("{0} {1}",Eval("Status"),Eval("NoAccessVisitCount")) : Eval("Status") %>
                        </ItemTemplate>
                        <HeaderStyle Width="80" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="Contract" AllowFiltering="false" HeaderText="Contract"
                        UniqueName="Contract">
                        <HeaderStyle Width="50" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="RaisedDate" AllowFiltering="false" HeaderText="Raised Date"
                        UniqueName="RAISEDDATE">
                        <HeaderStyle Width="50" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlWidth="20" DataField="RepairOrigin" HeaderText="Origin"
                        UniqueName="Origin">
                        <HeaderStyle Width="30" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlWidth="20" DataField="TradeCode" HeaderText="Trade"
                        UniqueName="TradeCode" >
                        <HeaderStyle Width="30" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlWidth="20" DataField="Priority" HeaderText="Priority"
                        UniqueName="PRIORITY">
                        <HeaderStyle Width="30" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Property.Postcode" HeaderText="Postcode" UniqueName="Postcode"
                        FilterControlWidth="40">
                        <HeaderStyle Width="40px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Engineer.ID" FilterControlWidth="50" HeaderText="Assigned To"
                        UniqueName="AssignedTo">
                        <HeaderStyle Width="100" />
                    </telerik:GridBoundColumn>                   
                    <telerik:GridBoundColumn DataField="BookedDate" HeaderText="Booked Date" SortExpression="BookedDate" FilterControlWidth="50"
                        UniqueName= "BookedDate" DataFormatString="{0:dd/MM/yyyy}">
                        <HeaderStyle Width="50" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn FilterControlWidth="40" UniqueName="TimeSlot" HeaderText="Time Slot">
                        <HeaderStyle Width="80" />
                        <ItemTemplate>
                            <%#String.IsNullOrEmpty(((string)Eval("TimeSlot"))) ? "N/A" : Eval("TimeSlot") %>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn FilterControlWidth="50" HeaderText="Target Date" UniqueName="TargetDate" SortExpression="CompleteDateTime">
                        <HeaderStyle Width="50" />
                        <ItemTemplate>
                           <%#(Eval("TargetDate","{0:d}"))%><br />
                           <%#(Eval("TargetDate","{0:t}"))%>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            <PagerStyle AlwaysVisible="true"/></MasterTableView>
        </telerik:RadGrid>


</asp:Content>

protected void RadGridJobNumber_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            if (e.RebindReason.Equals(GridRebindReason.InitialLoad))
                return;


            var rg = ((RadGrid) sender);
            var r = GetRequest();
            r.pageIndex = rg.CurrentPageIndex;
            r.pageSize = rg.PageSize;
            rg.DataSource = svcWorkOrder.ListAllJobSearchRequest(r);
            rg.VirtualItemCount = svcWorkOrder.CountAllJobSearchRequest(r);


        }
        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }
        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            Control ctrl = Page.LoadControl("../user_controls/AllJobsLazyToolTip.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
            AllJobsLazyToolTip details = (AllJobsLazyToolTip)ctrl;
            details.OrderID = elementID;
        }
        protected void RadGridJobNumber_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
            {
                Control target = e.Item.FindControl("HyperLink1");
                if (!Object.Equals(target, null))
                {
                    if (!Object.Equals(this.RadToolTipManager1, null))
                    {
                        //Add the button (target) id to the tooltip manager
                        this.RadToolTipManager1.TargetControls.Add(target.ClientID, (e.Item as GridDataItem).GetDataKeyValue("OrderID").ToString(), true);
                    }
                }
            }
        }

[Andrey]

Hello,

I have already answered your question in the support thread you have submitted.

I suggest to post your questions in the support thread if you have any.

Greetings,
Andrey
the Telerik team