Cannot dynamically set target control clientside by set_targetControlID

[TIGER]

Hi:
  I have a RadListView with some items. When one of the item is clicked a tooltip will appear corresponding to the item's position with detail info from an usercontrol (the tooltip's content is an usercontrol). This requires setting the "TargetControlID" when the listview item is clicked. Because the listview item is in a template, to distinquish each item when many items show at the same time can be done by including the item inside a div html element. And the selected item div can be obtained by onmouseDown event target. Since the content of tooltip is an usercontrol, and is a update target of ajaxmanager triggered by listview, I have to load it from server side. It ends up with setting TargetControlID on client side with set_targetControlID and show Tooltip on server side as demonstrated in the attached program fragment. I checked value of TargetControlID from client side in debug, value set accordingly, but tooltip displayed in wrong position. I checked  TargetControlID from server side right before SHOW(), found out the value has not changed. I made sure set_targetControlID() happend before SHOW(). I even try to use set_title("test title") just for testing purpose, not thing happened on the server side. Some one please help. Thanks.
This is the RadToolTip declaration:  
              <telerik:RadToolTip ID="RadToolTip1" runat="server" Animation="FlyIn"
                EnableShadow="True" HideEvent="ManualClose"
                ManualCloseButtonText="关闭" ShowEvent="FromCode" Width="268px" IsClientID="True">
                <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
                <br />
            </telerik:RadToolTip>

This is the client script:

        function SetTooltipControlID() {
            var radToolTip = $find("<%= RadToolTip1.ClientID %>");
            radToolTip.set_targetControlID("");
            radToolTip.set_targetControlID(curItem.id);
            radToolTip.set_title("this is a title");   //for testing purpose
        }

This is the server code:

        protected void lvwItemPictures_SelectedIndexChanged(object sender, EventArgs e)
        {
            string item = lvwItemPictures.SelectedItems[0].GetDataKeyValue("PLUCODE").ToString();
            string title = lvwItemPictures.SelectedItems[0].GetDataKeyValue("TITLE").ToString();
            CurrentItemCode = item;
            this.RadToolTip1.Show();   // checked RadToolTip1 properties here. Any change made in client code is not reflected.
            LoadUserControl(PlaceHolder1, CurrentControl, true);
 

        }

 

[Marin Bratanov]

Hello,

The RadToolTip is primarily a client-side object (its entire UI is created when it has to be shown), and thus modifying it via JavaScript is not carried over to the server. What I can assume happens is that you dispose the tooltip and thus it takes the old targetControlID from the ViewState. I can suggest several ways to go around this:
1. as you need the server-side code anyway you can set the targetControlID there (you could first store it in a hidden field if necessary)
2. use the RadToolTipManager, as it offers multiple target controls and the ability to load a user control via AJAX internally. More information can be found here and a demo, that I believe is quite close to your scenario here.

Just for test I tried changing the target control id and it works correctly when done entirely via JavaScript, but a postback reverts it to the original, as expected:

<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="div1" IsClientID="true"
    RelativeTo="Element" Position="BottomCenter">
    Some text
</telerik:RadToolTip>
<div id="div1" style="width: 100px; height: 100px; background-color: Green;">
</div>
<div id="div2" style="width: 100px; height: 100px; background-color: Green; position: absolute;
    left: 250px;">
</div>
<asp:Button ID="Button1" Text="change target control" OnClientClick="changeTarget(); return false;"
    runat="server" />
<asp:Button ID="Button2" Text="postback" runat="server" />
<script type="text/javascript">
    function changeTarget()
    {
        $find("RadToolTip1").set_targetControlID("div2");
    }
</script>

Kind regards,
Marin
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.