This is a migrated thread and some comments may be shown as answers.

Show/Hide Filtering Menu onMouseOver/onMouseOut

8 Answers 224 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DW Web Team Member
Top achievements
Rank 2
DW Web Team Member asked on 29 Jul 2009, 06:49 PM
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

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 30 Jul 2009, 05:13 AM
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.
0
DW Web Team Member
Top achievements
Rank 2
answered on 30 Jul 2009, 01:48 PM
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

0
DW Web Team Member
Top achievements
Rank 2
answered on 31 Jul 2009, 01:54 PM
Hi,

Any other suggestions?

Thanks
0
Mira
Telerik team
answered on 04 Aug 2009, 01:29 PM
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.
0
DW Web Team Member
Top achievements
Rank 2
answered on 04 Aug 2009, 03:59 PM
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

 

0
Mira
Telerik team
answered on 05 Aug 2009, 04:13 PM
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.
0
DW Web Team Member
Top achievements
Rank 2
answered on 05 Aug 2009, 06:06 PM
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
0
Mira
Telerik team
answered on 06 Aug 2009, 04:55 PM
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.
Tags
Grid
Asked by
DW Web Team Member
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
DW Web Team Member
Top achievements
Rank 2
Mira
Telerik team
Share this question
or