RadAjaxManager, RadTooltip Manager and RadGrid Problem

2 posts, 0 answers
  1. Craig
    Craig avatar
    17 posts
    Member since:
    Mar 2009

    Posted 24 Jan 2012 Link to this post

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

    Posted 26 Jan 2012 Link to this post

    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
    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