Readonly events

2 posts, 0 answers
  1. Milton
    Milton avatar
    3 posts
    Member since:
    Apr 2013

    Posted 18 Jan Link to this post

    I want to open a Tooltip with TooltipManager when the user clicks over a READ-ONLY RadRating. Is there a way to achieve this? It works with OnMouseOver, but i'm unable to assign the Click event :-(
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3598 posts

    Posted 19 Jan Link to this post

    Hello,

    Below follows an example based on this demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx. I inspected the rendered HTML in order to get the desired information and targets. You can use the same approach and the sample below and tweak them according to your exact needs.

    <telerik:RadRating runat="server" ID="RadRating1" OnClientLoad="OnClientLoad" Enabled="false"></telerik:RadRating>
     
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" Width="400px" HideEvent="ManualClose" OffsetX="5"
        RelativeTo="Element" Position="BottomCenter" ShowEvent="FromCode" runat="server" IgnoreAltAttribute="true" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate">
    </telerik:RadToolTipManager>
     
    <script type="text/javascript">
        function OnClientLoad(sender, args) {
            //attach the click handler to the rating items
            $telerik.$(".rrtItem a", sender.get_element()).on("click", showTtip);
        }
        function showTtip(evt) {
            var tooltipManager = $find("<%=RadToolTipManager1.ClientID%>");
             
            //get the tooltip target - the rating item
            var target = evt.currentTarget;
            //get the value for the tooltip - the rating item value - when it is disabled it does not get populated in the title so we use the inner span's HTML content
            var val = target.getElementsByTagName("span")[0].innerHTML;
            //remove the title attribute of the tooltip target to ensure it will not take precedence over the load-on-demand (if present, it will)
            target.setAttribute("title", "");
             
            if (!tooltipManager || !target)
                return;
         
            var tooltip = tooltipManager.getToolTipByElement(target);
         
            if (!tooltip) {
                tooltip = tooltipManager.createToolTip(target);
                tooltip.set_value(val);
            }
         
            //show the tooltip
            setTimeout(function () {
                tooltip.show();
            }, 10);
        }
    </script>
    protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
    {
        string content = string.Format("content for {0} loaded on {1}", e.Value, DateTime.Now.ToString());
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl(content));
    }


    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top