checkboxlist tooltip

9 posts, 1 answers
  1. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 15 Dec 2009 Link to this post

    Hello
    I have a checkboxlist which is linked to a dataset.
    I would like to have a tooltip on each item in my checkboxlist which would be linked to a field in my dataset.
    Here is my code

     Me.ChkMath.DataSource = dsBlocMath  
     Me.ChkMath.DataTextField = "NOM_COURS" 
     Me.ChkMath.DataValueField = "ID_COURS" 
     Me.ChkMath.DataBind() 
     <asp:CheckBoxList ID="ChkMath" runat="server">  
     </asp:CheckBoxList> 
    Thank you
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2009 Link to this post

    Hi Myriam,

    Here is the code that I tyried to add ToolTip for CheckBoxListItem. Give a try with this.

    aspx:
     
        <telerik:RadToolTip ID="RadToolTip1" runat="server" HideDelay="3000" RelativeTo="Element"
        </telerik:RadToolTip> 
        <asp:CheckBoxList ID="ChkMath" runat="server" DataSourceID="SqlDataSource1" DataTextField="CategoryName" 
            OnDataBound="ChkMath_DataBound"
        </asp:CheckBoxList> 

    cs:
     
        protected void ChkMath_DataBound(object sender, EventArgs e) 
        { 
            foreach (ListItem item in ChkMath.Items) 
            {             
                item.Attributes["id"] = Guid.NewGuid().ToString(); 
                item.Attributes.Add("onmouseover""showtooltip('" + item.Attributes["id"] + "','"+item.Text+"')"); 
            } 
        } 

    javascript:
     
    <script type="text/javascript"
        function showtooltip(id, value) { 
            var checkboxlixt = document.getElementById("ChkMath"); 
            var checkboxlixtItem = document.getElementById(id); 
            var tooltip = $find("<%= RadToolTip1.ClientID%>"); 
            tooltip.set_targetControlID(id); 
            tooltip.set_text(value); 
            tooltip.show(); 
        } 
    </script> 

    I guess the following demo will give some insight in adding tooltip from clientside/server side.
    RadToolTip for RadTreeView

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 16 Dec 2009 Link to this post

    seems like it doesn't like the line
    var tooltip = $find('<%= RadToolTip1.ClientID%>');
    the error is caused by the <% %>

    EDITED:
    Sorry I forgot to let you know the error message:
    Détails de l'exception: System.Web.HttpException: La collection Controls ne peut pas être modifiée, car le contrôle contient des blocs de code (c'est-à-dire <% ... %>).

    I don't know what to do

    Thank you
  5. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 16 Dec 2009 Link to this post

    I read this and it solved my error:
    http://www.telerik.com/community/forums/aspnet-ajax/calendar/usercontrol-not-allow-open-popup-as-lt-gt.aspx

    Now how can I put the field "Description" as tooltip instead of the text that I already see for the checkbox?
    Thank you!
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2009 Link to this post

    Hello Myriam,

    I tried accessing the DataTable and pass the description to client side in order to show in tooltip. Give a try with following code.

    VB:
     
    Private dt As New DataTable 
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As EventArgs) 
        dt = GetDataTable("SELECT * FROM Categories")  ' Query the database 
        ChkMath.DataSource = dt 
        ChkMath.DataTextField = "NOM_COURS" 
        ChkMath.DataBind() 
    End Sub 
     
    Protected Sub ChkMath_DataBound(ByVal sender As ObjectByVal e As EventArgs) 
        For Each item As ListItem In ChkMath.Items 
            item.Attributes("id") = Guid.NewGuid().ToString() 
            Dim decr As String = item.Text 
            Dim rView As DataRow() = dt.[Select]("Description='" & decr& "'"
            Dim str As String = rView(0)("Description").ToString() 
            item.Attributes.Add("onmouseover", ("showtooltip('" & item.Attributes("id") & "','") + str & "')"
        Next 
    End Sub 

    -Shinu.
  7. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 17 Dec 2009 Link to this post

    Hello

    First, Thank you for you reply and the code you gave me. Unfortynetly, it doesn't work. I get the error message:"L'index se trouve en dehors des limites du tableau." as if doesn't find the record. But it seems to search where the Description = the checkbox text which is false. It should look with the Id_cours.

    Maybe I explain myself not correctly. I'll try to make my explanation better.

    I have a textfield "Id_Cours", a text field "Nom_COURS" and another text field "Description"
    For each checkbox in my checkboxlist, I display the field "Nom_COURS" as the textValue. I have the field "Id_Cours" as valueField. I would like to have the field "Description" as tooltip. Note that 2 records can have the same "NOM_COURS", so the key is "Id_Cours".
    Hope that it make sense.
    Thank you again!
  8. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 17 Dec 2009 Link to this post

    I found!
    Here is the code adapted to my situation
      Private Sub ChkBloc_DataBound(ByVal sender As ObjectByVal e As System.EventArgs) Handles ChkBloc.DataBound  
            For Each item As ListItem In ChkBloc.Items  
                item.Attributes("id") = Guid.NewGuid().ToString()  
                Dim decr As String = item.Value  
                Dim rView As DataRow() = dsCoursBloc.[Select]("ID_COURS='" & decr & "'")  
                Dim str As String = rView(0)("Description").ToString()  
                item.Attributes.Add("onmouseover", ("showtooltip('" & item.Attributes("id") & "','") + str & "')")  
            Next 
     
        End Sub 
  9. Myriam
    Myriam avatar
    153 posts
    Member since:
    Sep 2008

    Posted 17 Dec 2009 Link to this post

    I just saw the tooltip doesn't disappear by itself, I have to click on the page to make it disappear, Does it have a way that when i'm not on the checkbox, the tooltip disappear?
    Thank you again and again
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Dec 2009 Link to this post

    Hi Myriam,

    In order to specify the event on which teh tooltip should hide, you should choose and set the HideEvent property demonstrated below:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/hideevent/defaultcs.aspx

    I also suggest to examine HideDelay and AutoCloseDelay properties - you can test them online below:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx

    In case you continue experiencing problems share your tooltip definition and provide very detailed explanations of teh actuala nd teh desired result and I will do my best to help.

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017