RadTooltip Disappears when Clicking on checkbox

6 posts, 0 answers
  1. Muhammad
    Muhammad avatar
    87 posts
    Member since:
    Oct 2012

    Posted 08 Jun 2011 Link to this post

    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>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Muhammad
    Muhammad avatar
    87 posts
    Member since:
    Oct 2012

    Posted 10 Jun 2011 Link to this post

    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
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 13 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Muhammad
    Muhammad avatar
    87 posts
    Member since:
    Oct 2012

    Posted 13 Jun 2011 Link to this post

    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
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017