RadTooltip Disappears when Clicking on checkbox

[Muhammad]

Hi,

I am using  grdiview in a radtooltip the problem is that when user click on a checkbox in a radtooltip the tooltip disappears which I really don't want.

                        <telerik:RadToolTip ID="RadToolTipJobStatus" runat="server" CssClass="tooltipBackColor"
                            ManualClose="true" ManualCloseButtonText="Close" TargetControlID="lblJobStatus"
                            RelativeTo="Element" HideDelay="4000" HideEvent="LeaveTargetAndToolTip" ShowCallout="true"
                            Position="TopRight" Width="550px" Height="200px">
                            <asp:GridView ID="gvJobStates" runat="server" AutoGenerateColumns="False" ShowHeader="true"
                                OnRowDataBound="gvJobStates_RowDataBound" Width="100%" OnRowCreated="gvJobStates_RowCreated">
                                <HeaderStyle BackColor="SkyBlue" />
                                <Columns>
                                    <asp:TemplateField SortExpression="JobStateName">
                                        <HeaderTemplate>
                                            <asp:Label ID="lblHeader" Text="Stage" runat="server"></asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lblJobStateName" runat="server" Text='<%# Eval("JobStateName") %>'
                                                Font-Bold='<%# Eval("IsCompleted")%>' />
                                            <asp:HiddenField ID="hidJobStateKey" runat="server" Value='<%# Eval("ID")%>' />
                                            <asp:HiddenField ID="hidJobKey" runat="server" Value='<%# Eval("JobID")%>' />
                                        </ItemTemplate>
                                        <ItemStyle Width="45%" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderTemplate>
                                            <asp:Label ID="Label1" Text="Marked By" runat="server"></asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lblUserName" runat="server" />
                                        </ItemTemplate>
                                        <ItemStyle Width="45%" />
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <HeaderTemplate>
                                            <asp:Label ID="Label2" Text="Completed" runat="server"></asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="cbIsCompleted" runat="server" AutoPostBack="true" OnCheckedChanged="cbIsCompleted_CheckedChanged"
                                                Checked='<%# Eval("IsCompleted")%>' ValidationGroup='<%# Eval("ID")%>' />
                                        </ItemTemplate>
                                        <ItemStyle Width="10%" HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </telerik:RadToolTip>

[Marin Bratanov]

Hi Muhammad,

You have set the AutoPostBack property of the checkbox to true and thus when you click on it a full page postback occurs, which in turn causes the tooltip to be hidden, as it is a client-side object and gets destroyed when the page is disposed. What I would suggest is to wrap the GridView in an update panel so that only its content is updated when the callback occurs from within:

<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:GridView ID="gvJobStates" runat="server" AutoGenerateColumns="False" ShowHeader="true"
    Width="100%">
    <HeaderStyle BackColor="SkyBlue" />
    <Columns>
        <asp:TemplateField SortExpression="JobStateName">
            <HeaderTemplate>
                <asp:Label ID="lblHeader" Text="Stage" runat="server"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblJobStateName" runat="server" Text='<%# Eval("JobStateName") %>'
                    Font-Bold='<%# Eval("IsCompleted")%>' />
                <asp:HiddenField ID="hidJobStateKey" runat="server" Value='<%# Eval("ID")%>' />
                <asp:HiddenField ID="hidJobKey" runat="server" Value='<%# Eval("JobID")%>' />
            </ItemTemplate>
            <ItemStyle Width="45%" />
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label ID="Label1" Text="Marked By" runat="server"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Label ID="lblUserName" runat="server" />
            </ItemTemplate>
            <ItemStyle Width="45%" />
        </asp:TemplateField>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label ID="Label2" Text="Completed" runat="server"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="cbIsCompleted" runat="server" AutoPostBack="true" OnCheckedChanged="cbIsCompleted_CheckedChanged"
                    Checked='<%# Eval("IsCompleted")%>' ValidationGroup='<%# Eval("ID")%>' />
            </ItemTemplate>
            <ItemStyle Width="10%" HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

On a side note - the ManualClose property is obsolete and therefore no longer in effect. You should use the HideEvent propery and set its value to ManualClose instead.

I also notice that you are missing the IsClientID and ShowEvent properties from the ToolTip's declaration and I would recommend setting them to false and OnMouseOver (or any other of the available which suits your needs).

Best wishes,
Marin
the Telerik team

[Muhammad]

Hi,

Thank you so much for your reply but the problem is that my tooltip grid is within another grid and I rebind that grid when user press a checkbox button. Using an update panel keeps the tooltip grid visible in a screen but I can't refresh the contents of my master grid to be visible. I have to refresh the page to see the changes which I really don't want.



<asp:GridView ID="gvJobs" runat="server" Width="100%" CellPadding="2" AutoGenerateColumns="False"
        CssClass="gridviewSpacing gvJobs" AllowPaging="true" ShowHeaderWhenEmpty="true">
        <Columns>
  <ItemTemplate>
                    <asp:Label ID="lblJobStatus" runat="server" Text='<%# FF_JobState.GetJobStateSummary(Container.DataItem) %>' />
                    <div id="divJobStatus" class="tooltip">
                        <telerik:RadToolTip ID="RadToolTipJobStatus" runat="server" CssClass="tooltipBackColor" ManualClose="true"
                            TargetControlID="lblJobStatus" IsClientID="false" ShowEvent="OnMouseOver" RelativeTo="Element"
                            HideDelay="4000" HideEvent="ManualClose" ShowCallout="true" Position="TopRight"
                            Width="550px" Height="200px">
                            <asp:UpdatePanel runat="server" ID="gvJobStatesUpdatePanel">
                                <ContentTemplate>
                                    <asp:GridView ID="gvJobStates" runat="server" AutoGenerateColumns="False" ShowHeader="true"
                                       OnRowDataBound="gvJobStates_RowDataBound" Width="100%" OnRowCreated="gvJobStates_RowCreated">
                                        <HeaderStyle BackColor="SkyBlue" />
                                        <Columns>
                                            <asp:TemplateField SortExpression="JobStateName">
                                                <HeaderTemplate>
                                                    <asp:Label ID="lblHeader" Text="Stage" runat="server"></asp:Label>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:Label ID="lblJobStateName" runat="server" Text='<%# Eval("JobStateName") %>'
                                                        Font-Bold='<%# Eval("IsCompleted")%>' />
                                                    <asp:HiddenField ID="hidJobStateKey" runat="server" Value='<%# Eval("ID")%>' />
                                                    <asp:HiddenField ID="hidJobKey" runat="server" Value='<%# Eval("JobID")%>' />
                                                </ItemTemplate>
                                                <ItemStyle Width="45%" />
                                            </asp:TemplateField>
                                            <asp:TemplateField>
                                                <HeaderTemplate>
                                                    <asp:Label ID="Label1" Text="Marked By" runat="server"></asp:Label>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:Label ID="lblUserName" runat="server" />
                                                </ItemTemplate>
                                                <ItemStyle Width="45%" />
                                            </asp:TemplateField>
                                            <asp:TemplateField>
                                                <HeaderTemplate>
                                                    <asp:Label ID="Label2" Text="Completed" runat="server"></asp:Label>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="cbIsCompleted" runat="server" AutoPostBack="true" OnCheckedChanged="cbIsCompleted_CheckedChanged"
                                                        Checked='<%# Eval("IsCompleted")%>' ValidationGroup='<%# Eval("ID")%>' />
                                                </ItemTemplate>
                                                <ItemStyle Width="10%" HorizontalAlign="Center" />
                                            </asp:TemplateField>
                                            <%--                                    <asp:BoundField HeaderText="JobState ID" DataField="ID" ReadOnly="true" Visible="false" />
                                    <asp:BoundField HeaderText="Job ID" DataField="JobID" ReadOnly="true" Visible="false" />
                                            --%>
                                            <%--                                    <asp:TemplateField SortExpression="JobStateName"></asp:TemplateField>
                                    <asp:BoundField HeaderText="" DataField="JobID" ReadOnly="true" Visible="false" />
                                            --%>
                                            <%--<asp:TemplateField></asp:TemplateField>--%>
                                        </Columns>
                                    </asp:GridView>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </telerik:RadToolTip>
                    </div>
                    <asp:HiddenField ID="hidIsCompleted" Value='<%# Eval("IsCompleted")%>' runat="server" />
                    <asp:HiddenField ID="hidIsCancelled" Value='<%# Eval("IsCancelled")%>' runat="server" />
                </ItemTemplate>
 </Columns>
</asp:GridView>


Protected Sub cbIsCompleted_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)

        Dim cb As CheckBox = sender
        Dim nJobStateKey As Integer = cb.ValidationGroup
        Dim ffJobState As New FF_JobState(nJobStateKey)
        If cb.Checked Then
            If ffJobState.JobStateName = FF_GLOBALS.JOB_STATE_COMPLETED Then
                Call FF_JobState.SetAllStagesCompleted(ffJobState.JobID)
                Dim ffJob As New FF_Job(ffJobState.JobID)
                ffJob.CompletedOn = DateTime.Now
                ffJob.Update(ffJobState.JobID)


            End If
            ffJobState.IsCompleted = cb.Checked
            ffJobState.Update(nJobStateKey)
            Dim ffAuditEvent As New FF_AuditTrail(ffJobState, Me)
            Call SetQuery()
            Call BindJobsGridView() ' Binding my grid again 
            Call HighLightUserJobStages()
            Call NotificationEmailSend(ffJobState.JobID, ffJobState.id, ffJobState.Position)
        Else
            ffJobState.IsCompleted = cb.Checked
            ffJobState.Update(nJobStateKey)
            Dim ffAuditEvent As New FF_AuditTrail(ffJobState, Me)
            Call SetQuery()
            Call BindJobsGridView() ' Binding my grid again
            Call HighLightUserJobStages()


        End If      


    End Sub

[Marin Bratanov]

Hello Muhammad,

If you want to refresh the parent grid you will have to dispose the tooltip as well, since it will be refreshed as well (it is inside the grid after all). That being said what I would suggest is to inject a script from the server-side handler that shows the tooltip when the page is loaded anew:

Dim script As String = "function f(){$find('" + RadToolTipJobStatus.ClientID + "').show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "key", script, true);

You could also store the client ID of the desired tooltip in a hidden field in its OnClientShow event so that the correct one will be opened after the postback. Please note that whether this is possible depends on the changes you make to the content of the grid - if it is changed a lot the wrong tooltip may be opened or an error may be thrown if one with the said ID does not exist.

All that being said it is likely that your scenario cannot be achieved via the RadToolTip since it is a client-side object and is not designed to persist its state over postbacks.

Greetings,
Marin
the Telerik team

[Muhammad]

Hi,

Thank you so much for your reply but I can't find the radtooltip control. Is it possible to find that control using NamingContainer.

 Protected Sub cbIsCompleted_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)


        Dim cb As CheckBox = sender


        Dim RadToolTipJobStatus As RadToolTip = cb.NamingContainer.FindControl("RadToolTipJobStatus") ' getting nothing here 

 Dim script As String = "function f(){$find('" + RadToolTipJobStatus.ClientID + "').show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "key", script, True)

  End Sub

[Marin Bratanov]

Hello Muhammad,

Getting a reference to a control inside an INaming container is a general ASP knowledge and is not directly related to our controls. I believe you may find the following google search useful in this matter: http://www.google.com/search?client=opera&rls=en&q=reference+controls+in+gridview&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest. The most likely reason is that you will need to first reference the row on which the tooltip resides and then use the FindControl method, since it only finds direct children in its context, it does not search within other nested containers.

Greetings,
Marin
the Telerik team