Hola a todos :),
En mi aplicación uso un gridview,a su vez este tiene un
"Menu Contextual" para cada fila.
El Menu Contextual puedo abrilo con la propiedad onmouseover que le asigno al panel
(que está ubicado en la primera celda de cada fila), sin embargo debo cerrarlo con un click.
El problema se presenta si paso el mouse sobre todos los paneles de menu contextual.
Me gustaría que cuando el mouse pase sobre el siguiente panel se cierre el anterior,
sin tener que usar la propiedad onclick.
Ejemplo:
El Mouse pasa por por los paneles de las filas 1, 2 y 3.
como veran las filas 1 y 2 no se cierran.
..........PANELES
fila 1 | Menu | dato1 |dato2
fila 2 | Menu | dato1 |dato2
fila 3 | Menu | dato1 |dato2
fila 4 |...........| dato1 |dato2
fila 5 |...........| dato1 |dato2
fila 6 |...........| dato1 |dato2
Código:
HTML:
<asp:GridView ID="GridView1" DataKeyNames="IdMotivo" OnRowDataBound="GridView1_RowDataBound" OnPageIndexChanging="GridView1_PageIndexChanging" runat="server" CssClass="grid" Width="100%" AutoGenerateColumns="False" PageSize="6" AllowPaging="True">
<Columns>
<asp:TemplateField>
<ItemStyle Width="4px" />
<ItemTemplate>
<div id="popupMenuGridView" runat="server" style="display:none; z-index:101; width:200px; position:absolute; height:38px">
<ul class="SimpleContextMenu" >
<li id="liImageButton1" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/xhtmlcss/img/detalle02.png" />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Detalles</asp:LinkButton>
</li>
</ul>
</div>
<div id="panelContextmenuId" runat="server" class="panelContextmenu">
<asp:Image ID="ImgToolBar" runat="server" ImageUrl="~/xhtmlcss/img/context.png" />
</div>
</ItemTemplate>
</asp:TemplateField>
...otras columnas...
.CS
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
DataTable dataServicio = new DataTable();
if (e.Row.RowType == DataControlRowType.DataRow)
{
//configuramos el contextmenu
LinkButton lbtnAnotacion = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");
LinkButton lbtnCancelar = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");
LinkButton lbtnDetalle = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");
LinkButton lbtnCalificar = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");
HtmlGenericControl panel = (HtmlGenericControl)e.Row.Cells[0].FindControl("popupMenuGridView");
HtmlGenericControl cMenu = (HtmlGenericControl)e.Row.Cells[0].FindControl("panelContextmenuId");
string showPopup = "ShowPopup('" + lbtnAnotacion.ClientID + "','" + lbtnCancelar.ClientID + "','" + lbtnDetalle.ClientID + "','" + lbtnCalificar.ClientID + "','" + panel.ClientID + "','" + e.Row.ClientID + "')";
string hidePopup = "HidePopup('" + lbtnAnotacion.ClientID + "','" + lbtnCancelar.ClientID + "','" + lbtnDetalle.ClientID + "','" + lbtnCalificar.ClientID + "','" + panel.ClientID + "','" + e.Row.ClientID + "')";
cMenu.Attributes.Add("onmouseover", "javascript:" + showPopup);
e.Row.Attributes.Add("onclick", "javascript:" + hidePopup);
.JS
//***************************************** configura el menu en el gridview
//Shows DIV popup commands for gridview
function ShowPopup(lbtn1,lbtn2,lbtn3,lbtn4, panel, gridviewRow)
{
var link1 = document.getElementById(lbtn1);
var link2 = document.getElementById(lbtn2);
var link3 = document.getElementById(lbtn3);
var link4 = document.getElementById(lbtn4);
var pnl = document.getElementById(panel);
var row= document.getElementById(gridviewRow);
pnl.style.display = "inline";
if(link1 != null)
link1.style.display = "inline";
if(link2 != null)
link2.style.display = "inline";
if(link3 != null)
link3.style.display = "inline";
if(link4 != null)
link4.style.display = "inline";
}
//Hides DIV popup commands for gridview
function HidePopup(lbtn1,lbtn2,lbtn3,lbtn4, panel, gridviewRow)
{
var link1 = document.getElementById(lbtn1);
var link2 = document.getElementById(lbtn2);
var link3 = document.getElementById(lbtn3);
var link4 = document.getElementById(lbtn4);
var pnl = document.getElementById(panel);
var row= document.getElementById(gridviewRow);
pnl.style.display = "none";
if(link1 != null)
link1.style.display = "none";
if(link2 != null)
link2.style.display = "none";
if(link3 != null)
link3.style.display = "none";
if(link4 != null)
link4.style.display = "none";
}
Ayuda.
Saludos y Gracias de Antemano.
,
