Show/Hide Filtering Menu onMouseOver/onMouseOut

[DW Web Team Member]

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

[Shinu]

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.

[DW Web Team Member]

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

[DW Web Team Member]

Hi,

Any other suggestions?

Thanks

[Mira]

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.

[DW Web Team Member]

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

 

[Mira]

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.

[DW Web Team Member]

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

[Mira]

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.