How to display a flyout menu on clicking an image in Grid header in MVC?
- by Vincent
A grid is displayed using the following code in MVC.
<%= this.Grid( "routes-" + mc , "Testing", Model.Routes, new GridBuilder<RouteModel>()
.Column( "chk", () => Html.Image( Url.Content( "down.gif" ), "Select or deselect tests" ),
(m) => "<input type='hidden' name='routeLinkId' value='"+ m.RouteLinkID +"' />" + Html.CheckBox( "drugRoute" + mc + m.RouteLinkID, m.IsChecked )
)
.Column( "route clip-text", "Route", (m) = Html.Encode( m.Route ) )
.Column( "groups clip-text", "Groups", (m) = "" + Html.Encode(m.Group) + "" )
.ToGrid()
)
%
On clicking the image in header I need to display a flyout menu. The code for the flyout menu is below.
<div id="group-menu-<%= mc %>" class="flyout-menu" title="Select tests">
<div>
<p>Select</p>
<ul>
<li><button type="button" name="one">One</button></li>
<li><button type="button" name="two">two</button></li>
</ul>
<p>Unselect</p>
<ul>
<li><button type="button" name="unselect-one">one</button></li>
<li><button type="button" name="unselect-two">two</button></li>
</ul>
</div>
</div>
Now how do I display this menu on clicking the image in header.
