RadTool inside a grid - hide/show

2 posts, 0 answers
  1. sonu
    sonu avatar
    1 posts
    Member since:
    Aug 2006

    Posted 22 Jan 2013 Link to this post


    I have a grid.  Inside that I have added radTooltip inside GridTemplateColumn.  I am binding the grid at client side.  Everything is working fine.  The problem here is based on one condition I need to hide/show the tooltip.
    In the RowDatabound event I am doing the following:




    RadGrid1_RowDataBound(sender, args) {




    // debugger;




    var image = args.get_item().get_cell("Barcode").getElementsByTagName('img')[0];




    var tooltipDiv = args.get_item().get_cell("Barcode").getElementsByTagName('Div')[0];




    var invalidText = args.get_dataItem().InValidText;




    '#' + tooltipDiv.id).hide();




    } //RadGrid1_RowDataBound

    But on hover over the image I still see a small box coming as a tooltip.

    Your help is greatly appreciated.

    Sohan Kumar Agarwal


  2. Marin Bratanov
    Marin Bratanov avatar
    4441 posts

    Posted 24 Jan 2013 Link to this post

    Hi Sohan,

    It seems you already have the tooltip target the image in the markup (e.g. its TargetControlID property is set to the ID of the image). This means it will attach handlers to the target and show up, regardless of the fact that you do not provide text for it.

    Now, on getting a reference to it - the jQuery wrapper or DOM element you get in this way is not an actual reference to the RadToolTip's client object that will expose its full API. Usually the $find() method is used for getting this reference as shown here, but in your case you can't do that because you cannot know its ClientID. What I can suggest is getting a reference to the DOM object of its div wrapper through jQuery (or through your current code, if that is what it does, I do not know the structure of your cell), then use its control field to get a reference to the script control associated with it, e.g.:
    var tooltip = args.get_item().get_cell("Barcode").getElementsByTagName('Div')[0].control;
    You can then use its Client-side API to set the image as a target only if text has to be shown, for example:

    Another approach is raising a flag in the tooltip's object and cancel the OnClientBeforeShow event according to that, e.g.:
    tooltip._shouldNotShow = true;//according to your logic
    function OnClientBeforeShow(sender, args){
       args.set_cancel(sender._ shouldNotShow);
    where the OnClientBeforeShow handler can be added for the tooltip in the markup.

    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top