This is a migrated thread and some comments may be shown as answers.

[Solved] TooltipManager does not work after RadGrid's Ajax request

10 Answers 1004 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Mahesh Ramakrishnan asked on 22 Aug 2007, 05:36 PM

I have an user control with a Grid and TooltipManager inside UpdatePanel. I add TargetControls on ItemDataBound of RadGrid and handle AjaxUpdate of the TooltipManager. TooltipManager works fine but before any Ajax Request to the Grid. Once I click "Refresh" command item (that fires RebindGrid) or on another external client-side AjaxRequest() call, I don't get the tooltip.

Here is the code

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">  

    <ContentTemplate> 

        <radG:RadGrid ID="WorkItemsGrid" runat="server" AllowSorting="True"   

            AutoGenerateColumns="False" DataSourceID="WorkItemsObjectDataSource" EnableAJAX="True" EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="50" 

            GridLines="None" AllowMultiRowSelection="True" Width="100%" OnItemCommand="WorkItemsGrid_ItemCommand" OnItemDataBound="WorkItemsGrid_ItemDataBound">  

            <ClientSettings> 

                <Selecting AllowRowSelect="True" /> 

                <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="200px" /> 

                <ClientEvents OnGridCreated="GridCreated" /> 

            </ClientSettings> 

            <MasterTableView DataSourceID="WorkItemsObjectDataSource" CommandItemDisplay="Top" DataKeyNames="RequestID" 

                NoMasterRecordsText="No Work Items available.">  

                <SortExpressions> 

                    <radG:GridSortExpression FieldName="SubmittedOn" SortOrder="ascending" /> 

                </SortExpressions> 

                <CommandItemStyle HorizontalAlign="Right" /> 

                <CommandItemTemplate> 

                    <asp:LinkButton ID="WorkItemsRefreshButton" runat="server" CommandName="RebindGrid"><img style="border:0px" alt="" src="~/Images/Refresh.gif" runat="server" /> Refresh </asp:LinkButton> 

                    <asp:LinkButton ID="ReleaseRequestButton" runat="server" CommandName="ReleaseRequest"><img style="border:0px" alt="" src="~/Images/cancel.gif" runat="server" />Release</asp:LinkButton>&nbsp;  

                </CommandItemTemplate> 

                <Columns> 

                    <radG:GridButtonColumn DataTextField="RequestID" HeaderText="ReqID" UniqueName="RequestID" CommandName="ProcessRequest" ButtonType="LinkButton">  

                        <ItemStyle Width="5%" /> 

                        <HeaderStyle Width="5%" /> 

                    </radG:GridButtonColumn> 

                    <radG:GridButtonColumn DataTextField="ClientName" HeaderText="Client Name" UniqueName="ClientName" CommandName="ProcessRequest" ButtonType="LinkButton"  > 

                        <ItemStyle Width="10%" /> 

                        <HeaderStyle Width="10%" /> 

                    </radG:GridButtonColumn> 

                    <radG:GridBoundColumn AllowFiltering="False" DataField="ReqAttorney" Groupable="False" 

                        HeaderText="Req Attorney" UniqueName="ReqAttorney">  

                        <ItemStyle Width="10%"  /> 

                        <HeaderStyle Width="10%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="Requestor" HeaderText="Requestor" ReadOnly="True" 

                        UniqueName="Requestor">  

                        <ItemStyle Width="10%"  /> 

                        <HeaderStyle Width="10%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="ReqOffice" HeaderText="Office" ReadOnly="True" UniqueName="ReqOffice">  

                        <ItemStyle Width="5%"  /> 

                        <HeaderStyle Width="5%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="ReqType" HeaderText="Request Type" UniqueName="ReqType">  

                        <ItemStyle Width="15%"  /> 

                        <HeaderStyle Width="15%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="ReqStatus" HeaderText="Status" UniqueName="ReqStatus">  

                        <ItemStyle Width="14%" /> 

                        <HeaderStyle Width="14%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="SubmittedOn" HeaderText="Submitted" ReadOnly="True" 

                        UniqueName="SubmittedOn" DataFormatString="{0:g}">  

                        <ItemStyle Width="14%"  /> 

                        <HeaderStyle Width="14%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="ClaimedOn" HeaderText="Claimed On" UniqueName="ClaimedOn"  DataFormatString="{0:g}">  

                        <ItemStyle Width="14%" /> 

                        <HeaderStyle Width="14%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridBoundColumn DataField="ClaimedBy" HeaderText="Claimed By" UniqueName="ClaimedBy" Visible="false">  

                        <ItemStyle Width="10%" /> 

                        <HeaderStyle Width="10%" /> 

                    </radG:GridBoundColumn> 

                    <radG:GridClientSelectColumn UniqueName="SelectRequest" > 

                        <ItemStyle Width="3%" /> 

                        <HeaderStyle Width="3%" /> 

                    </radG:GridClientSelectColumn> 

                </Columns> 

                <ExpandCollapseColumn Visible="False">  

                    <HeaderStyle Width="19px" /> 

                </ExpandCollapseColumn> 

                <RowIndicatorColumn Visible="False">  

                    <HeaderStyle Width="20px" /> 

                </RowIndicatorColumn> 

            </MasterTableView> 

        </radG:RadGrid> 

        <telerik:RadToolTipManager ID="AlertToolTipManager" runat="server" OnAjaxUpdate="AlertToolTipManager_OnAjaxUpdate" RelativeTo="Element" Height="100%" Skin="WebBlue" Animation="None" Position="MiddleRight" MouseTrailing="false" OffsetY="-20">  

        </telerik:RadToolTipManager> 

    </ContentTemplate> 

</asp:UpdatePanel>

        protected void AlertToolTipManager_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)  

        {  

            int index = args.TargetControlID.LastIndexOf("_");  

            string reqID = args.TargetControlID.Substring(index + 1);  

            Control ctrl = Page.LoadControl("~/Parts/AlertToolTip.ascx");  

            args.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);  

            AlertToolTip alert = (AlertToolTip)ctrl;  

            alert.ReqID = int.Parse(reqID);  

        }  

        protected void WorkItemsGrid_ItemDataBound(object sender, GridItemEventArgs e)  

        {  

            if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)  

            {  

                DataRowView requestRowView = e.Item.DataItem as DataRowView;  

                if (requestRowView != null)  

                {  

                    int reqID = (int)requestRowView["RequestID"];  

                    GridDataItem gridItem = e.Item as GridDataItem;  

                    string controlID = "WorkReqAlert_" + reqID.ToString();  

                    gridItem["ReqStatus"].Text += GetHTMLCodeForAlert(controlID,reqID);  

                    ToolTipTargetControl target = new ToolTipTargetControl(controlID, true);  

                    AlertToolTipManager.TargetControls.Add(target);  

                }  

          }  

}  

        private string GetHTMLCodeForAlert(string controlID,int reqID)  

        {  

            string dataFormatString = "<img id='" + controlID + "' src='../Images/Email_Read.gif'>";  

            return dataFormatString;  

        }

Thank you,
Mahesh

10 Answers, 1 is accepted

answered on 23 Aug 2007, 01:47 PM

Thank you for quick response.

I just set EnableAJAX="False" in RadGrid. But I have two issues now,

1. It work fine before any AjaxRequest to the Grid ('RebindGrid' command through command item or external client-side call). On AjaxRequest I get a javascript exception
Sys.InvalidOperationException: Two components with the same id
'ctl00_cphMain_WorkItemsQueueControl_AlertTooltipManager' cannot be added to the application.

This is the TooltipManager control.

Am I missing something?

2. The AjaxLoadingPanel of Grid doesn't appear. Is there a way to get that or any other loading panel on UpdatePanel's ajax requests?

Thank you,
Mahesh

answered on 27 Aug 2007, 09:21 AM

Hello Mahesh Ramakrishnan,

Please make sure that you are using the latest version of the Telerik.Web.UI suite. In case this does not fix the problem, we will need a simple running project with which we can reproduce the problem.

In this case, as you have set EnableAJAX="false", you have to use a separate RadAjaxLoadingPanel and manually open and close it, when you wish. For example, in case you want the panel to hide the RadGrid only when you are sorting, you can use the following script:

<body>      

    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 

        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Height="75px" Width="75px">     

            <asp:Image ID="Image1" runat="server" AlternateText="Loading..." />    

        </telerik:RadAjaxLoadingPanel>    

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">  

            <ContentTemplate> 

                <radG:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None" 

                    OnItemDataBound="RadGrid1_ItemDataBound" AllowSorting="True">  

                    <MasterTableView AutoGenerateColumns="False" DataSourceID="AccessDataSource1">  

                        <Columns> 

                            <radG:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID" 

                                SortExpression="ProductID" UniqueName="ProductID">  

                            </radG:GridBoundColumn> 

                            <radG:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" 

                                UniqueName="ProductName">  

                            </radG:GridBoundColumn> 

                            <radG:GridTemplateColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" 

                                UniqueName="CategoryName">  

                                <ItemTemplate> 

                                    <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>'></asp:Label> 

                                </ItemTemplate> 

                                <EditItemTemplate> 

                                    <asp:TextBox ID="CategoryNameTextBox" runat="server" Text='<%# Bind("CategoryName") %>'></asp:TextBox> 

                                </EditItemTemplate> 

                            </radG:GridTemplateColumn> 

                        </Columns> 

                        <ExpandCollapseColumn Visible="False">  

                            <HeaderStyle Width="19px" /> 

                        </ExpandCollapseColumn> 

                        <RowIndicatorColumn Visible="False">  

                            <HeaderStyle Width="20px" /> 

                        </RowIndicatorColumn> 

                    </MasterTableView> 

                </radG:RadGrid><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/Nwind.mdb" 

                    SelectCommand="SELECT TOP 10 [ProductID], [ProductName], [CategoryName] FROM [Alphabetical List of Products]">  

                </asp:AccessDataSource> 

                <telerik:RadToolTipManager ID="AlertToolTipManager" runat="server" OnAjaxUpdate="AlertToolTipManager_OnAjaxUpdate" 

                    RelativeTo="Element" Height="100%" Skin="WebBlue" Animation="None" Position="MiddleRight" 

                    MouseTrailing="false" OffsetY="-20">  

                </telerik:RadToolTipManager> 

            </ContentTemplate> 

        </asp:UpdatePanel> 

    </form> 

    <script type="text/javascript">         

    function HandleAjaxLoadingPanel()     

    {     

        var prm = Sys.WebForms.PageRequestManager.getInstance();     

        prm.add_beginRequest(beginRequestHandler);     

        prm.add_endRequest(endRequestHandler);     

    }     

    var currentLoadingPanel = null;     

    var currentUpdatedControlId = null;     

    function beginRequestHandler(sender, args)     

    {     

        var prm = Sys.WebForms.PageRequestManager.getInstance();     

        if (args.get_postBackElement().id.indexOf('<%= RadGrid1.ClientID %>') != -1)     

        {     

            currentUpdatedControlId = '<%= RadGrid1.ClientID %>';    

            currentLoadingPanel = window["<%= LoadingPanel1.ClientID %>"];      

            currentLoadingPanel.Show(currentUpdatedControlId);     

        }     

    }     

    function endRequestHandler(sender, args)     

    {     

        if (currentLoadingPanel != null)     

        {     

            currentLoadingPanel.Hide(currentUpdatedControlId);     

        }     

        currentUpdatedControlId = null;     

        currentLoadingPanel = null;     

    }     

    HandleAjaxLoadingPanel();     

    </script>    

</body>

In the javascript I added a check to make sure that the postback was made by the grid - in case you remove it, you will always get the LoaddingPanel.

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 10 Oct 2007, 02:06 PM

Hi sk270,

I agree, the statement that Tsvetie used can be interpreted in this way. However, I would like to stress out that the RadToolTip "Prometheus" control can be used with RadGrid with Ajax enabled. The only difference is that the implementation for now is not so straightforward as with other controls.

I believe the information below will shed some light over the situation:

When you enable the Ajax of the RadGrid, any postback (raised from within the RadGrid), would result in an AJAX request that would update the RadGrid control, and the RadGrid control only.

For the RadToolTipManager to "tooltipify" the RadGrid control after Ajax update, "something" must inform RadToolTipManager as the manager must go again through the controls with IDs from its TargetControls collection and tooltipify them.

By the way the same logic apply to cases when you have tooltipified an element that is in an UpdatePane, RadAjaxPanel, etc. In this case, to make the implementation easier for our customers, we added some code that would "listen" for ajax requests and check whether it needs to tooltipified any updated by ajax request controls.

Currently, as the Ajax request made by the RadGrid (with EnableAjax=true) differs slightly from the standard ajax requests, the RadToolTipManager cannot register these requests.

Of course we will do our best to improve the situation and to make the tooltipifying of RadGrid easier, however this will happen in a future version of the controls. This task is not easily achieved and we will need more time for investigation and implementation of the new logic. I hope that you understand our position in this matter.

This being said, for the time being we suggest to use the workaround that was shown in this forum thread. If you experience any problems with it, please send us a sample project in a support ticket (as you know, you cannot attach files in the forums) and we will check it right away.

Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 29 Feb 2008, 09:02 PM

Hello garfield,
First of all, I would like to point out that as Georgi Tunev mentioned, this is not an issue, but rather a feature that is meant to simplify the integration of RadGrid Classic and RadToolTip Prometheus.

Regarding this feature - currently, most development efforts are concentrated on the Prometheus suite and that is why we have decided to set low priority for this task.

I would recommend that you use RadGrid Prometheus, instead of RadGrid Classic, and an UpdatePanel with UpdateMode=Conditional, or a RadAjaxPanel to wrap the two controls.

In case the problem persists, please prepare and send us a simple running project, demonstrating the described problem, together with detailed information on the steps we need to follow in order to reproduce it. Once we have your project, we will do our best to help you get the desired result.

Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center