Show/Hide Filtering Menu onMouseOver/onMouseOut

9 posts, 0 answers
  1. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 29 Jul 2009 Link to this post

    Hi,

    I am trying to show filtering menu onMouseOver even of the Filter button and to hide the menu onMouseOut event if the user decides not to change the filtering option. I managed to show the menu and have the problem with hidding it. Do you have any suggestion how I can do it?

    Here is my code:

    using

     

    System.Web.UI.WebControls;

     

    using

     

    Telerik.Web.UI;

     

    namespace

     

    WWR.Common.UI.WebControls

     

    {

     

    public class WWRFilteringGridBoundColumn : GridBoundColumn

     

    {

     

    public WWRFilteringGridBoundColumn() : base()

     

    {

    AutoPostBackOnFilter =

    true;

     

    }

     

    protected override void SetupFilterControls(TableCell cell)

     

    {

     

    base.SetupFilterControls(cell);

     

    TextBox txtFilter = (TextBox)cell.Controls[0];

    txtFilter.Attributes.Add(

    "onclick", "javascript:document.getElementById('" + txtFilter.ClientID + "').select();document.getElementById('" + txtFilter.ClientID + "').focus();");

     

    Button btnFilter = (Button)cell.Controls[1];

    btnFilter.Attributes.Add(

    "onmouseover", "javascript:document.getElementById('" + btnFilter.ClientID + "').click()");

     

     

    //btnFilter.Attributes.Add("onmouseout", "javascript: ");

     

    }

    }

    }

    Thank you for advance,

    Tatiana

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2009 Link to this post

    Hello,

    Try the following approach in order to hide the FilterMenu of radgrid onmouseout of filter button.

    C#:
     
      . . . 
    Button btnFilter = (Button)cell.Controls[1]; 
    btnFilter.Attributes.Add("onmouseout""hideFitermenu();"); 
      . . . 

    JavaScript:
     
    <script type="text/javascript"
    function hideFitermenu() 
        var grid = $find("<%=RadGrid1.ClientID %>");   
        grid._getFilterMenu().hide(); 
         
    </script> 

    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2009 Link to this post

    Thank you for the esponse. I modified my code, and here how it looks now:

    using

     

    System.Text;

     

    using

     

    System.Web.UI.WebControls;

     

    using

     

    Telerik.Web.UI;

     

    namespace

     

    Common.UI.WebControls

     

    {

     

    public class FilteringGridBoundColumn : GridBoundColumn

     

    {

     

    public FilteringGridBoundColumn() : base()

     

    {

    AutoPostBackOnFilter =

    true;

     

    }

     

    protected override void SetupFilterControls(TableCell cell)

     

    {

     

    base.SetupFilterControls(cell);

     

    clientScript();

     

    Button btnFilter = (Button)cell.Controls[1];

     

    btnFilter.Attributes.Add(

    "onmouseover", "javascript:document.getElementById('" + btnFilter.ClientID + "').click()");

     

    btnFilter.Attributes.Add(

    "onmouseout", "hideFilterMenu();");

     

    }

     

    private void clientScript()

     

    {

     

    StringBuilder sbClientScript = new StringBuilder();

     

     

    RadGrid grid = this.Owner.OwnerGrid;

     

    sbClientScript.AppendLine(

    "function hideFilterMenu()");

     

    sbClientScript.AppendLine(

    "{");

     

     

    sbClientScript.AppendLine(" var grid = $find(\"<%=" + grid.ID + " %>\");");

     

    sbClientScript.AppendLine(

    " grid._getFilterMenu().hide();");

     

    sbClientScript.AppendLine(

    "}");

     

     

     

    this.Owner.OwnerGrid.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "clientScript", sbClientScript.ToString(), true);

     

    }

    }

    }

    Unfortunately, $find() function does not work - grid is null. I tried to use document.getElementByID(), it worked, but returned object, not RadGrid. Do I do something wrong with $find(), or is there any other way to retrive RadGrid object?

    Thank you very much,
    Tatiana

  5. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2009 Link to this post

    Hi,

    Any other suggestions?

    Thanks
  6. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 04 Aug 2009 Link to this post

    Hello Tatiana,

    I recommend you to use
    sbClientScript.AppendLine(" var grid1 = $find(\"<%= grid.ClientID %>\");");
    to reference the client grid object when you append the javascript.

    Please let me know whether this worked for you.

    All the best,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 04 Aug 2009 Link to this post

    Hi Mira,

    Thank you very much for the response!

    I got it work by using this line of code:    sbClientScript.AppendLine(" var grid = $find(\"" + grid.ClientID + "\");");
    Now I can see the grid and filter menu. It's great!

    However, I am currently facing another problem that I did not think about before. The menu is hiding even if I put my mouse over the menu. This is because I assigned it to the onMouseOut of the Filter button.
    I need to hide the menu only when the mouse out of the filter button and out of the filter menu as well.

    Could you please help me with that?

    I will really appreciate any help!!!

    Thank you again,

    Tatiana

     

  8. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 05 Aug 2009 Link to this post

    Hello Tatiana,

    Please try to handle OnFilterMenuShowing client event:
    ASPX:
    <ClientSettings> 
         <ClientEvents OnFilterMenuShowing="filtermenuShowing" /> 
    </ClientSettings> 
    and set the focus to the menu:
    JS:
    <script type="text/javascript"
            function filtermenuShowing() 
            { 
                var grid = $find("<%=RadGrid1.ClientID %>"); 
                grid._getFilterMenu().focus(); 
            }  
    </script> 

    Please contact us if you need any further assistance.

    All the best,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. DW Web Team Member
    DW Web Team Member avatar
    43 posts
    Member since:
    Jun 2012

    Posted 05 Aug 2009 Link to this post

    Unfortunately, it did not help. :(

    What I am trying to do is ... The filter menu should be shown when I put my mouse over the filter button, and it should remain visible while the mouse is over the filter button or the filter menu. As soon as, I put the mouse out of the filter menu (without selecting any option) the menu should disappear.

    Any help or idea is greatly appreciated.

    Thank you,
    Tatiana
  10. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 06 Aug 2009 Link to this post

    Hello Tatiana,

    I would like to recommend that you use the Filter template instead of deriving GridBoundColumn and add the controls you want in the template. It will be much more easy to customize their behavior in this way.

    I hope this helps.

    Best wishes,
    Mira
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017