Problema con PopUp en GridView - Usando Ajax Toolkit ModalPopupExtender

[DeivisAndres]

Hola de nuevo, como están..
Pues esta vez vengo con un problema que no he podido resolver a un... y lo que trato de hacer es que tengo un GridView donde tiene un columna que tiene un Botón tipo imagen que me servirá para Modificar, pero lo hará abriéndome un PopPup con el de Ajax Toolkit ModalPopupExtender, pero no he logrado que me abra el PopPup desde la columna y que me mande la Id a ese Dialogo (Conectado con Sql Server) para ver si me podrían ayudar continuación les muestro lo que tengo...

La columna que tengo que me hará el Edit es:

Código Javascript:

<asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:ImageButton ID="btnUpdate" runat="server" ImageUrl="~/images/editar.gif" Width="15px" Height="15px" CommandName="SelectUpdate" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
 

Código Javascript:

<table class="style1" align="center">
                        <tr>
                            <td align="center">                                                                                            
                                <asp:GridView ID="GVProductos" runat="server" 
                                    BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" 
                                    CellPadding="4" CellSpacing="2" ForeColor="Black" 
                                    AutoGenerateColumns="False" DataKeyNames="id" 
                                    onrowcommand="GVProductos_RowCommand" 
                                    onselectedindexchanging="GVProductos_SelectedIndexChanging">
                                    <Columns >
                                        <asp:TemplateField HeaderText="Acción">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkDelete" runat="server" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Codigo" Visible="false">
                                            <ItemTemplate>
                                                <asp:Label ID="LblID" runat="server" Text='<%# Eval("id") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Nombre">
                                            <ItemTemplate>
                                                <asp:Label ID="LblNombre" runat="server" Text='<%# Eval("nombre") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Tipo">
                                            <ItemTemplate>
                                                <asp:Label ID="LblTipo" runat="server" Text='<%# Eval("tipo") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Cantidad">
                                            <ItemTemplate>
                                                <asp:Label ID="LblCantidad" runat="server" Text='<%# Eval("cantidad") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Valor">
                                            <ItemTemplate>
                                                <asp:Label ID="LblValor" runat="server" Text='<%# Eval("valor") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Fecha">
                                            <ItemTemplate>
                                                <asp:Label ID="LblFecha" runat="server" Text='<%# Eval("fecha") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="">
                                            <ItemTemplate>                                                
                                                <asp:ImageButton ID="btnEliminar" runat="server" ImageUrl="~/images/eliminar.gif" Width="15px" Height="15px"  CommandName="EliminarProduct" CommandArgument='<%# Eval("id") %>' OnClientClick="return Eliminar();" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:ImageButton ID="btnUpdate" runat="server" ImageUrl="~/images/editar.gif" Width="15px" Height="15px" CommandName="SelectUpdate" />
                                            </ItemTemplate>
                                        </asp:TemplateField>                                      
                                    </Columns>
                                    <FooterStyle BackColor="#CCCCCC" />
                                    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                                    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
                                    <RowStyle BackColor="White" />
                                    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                    <SortedAscendingCellStyle BackColor="#F1F1F1" />
                                    <SortedAscendingHeaderStyle BackColor="Gray" />
                                    <SortedDescendingCellStyle BackColor="#CAC9C9" />
                                    <SortedDescendingHeaderStyle BackColor="#383838" />
                                </asp:GridView>                                
                            </td>
                        </tr>
                        <tr>
                            <td align="left">                            
                                <asp:Button ID="btnDelect" runat="server" Text="Eliminar" 
                                    onclick="btnDelect_Click" OnClientClick="return Eliminar();" />                            
                            </td>
                        </tr>
                    </table>
 

Y este es el PopPup: Omitiendo algunas cosas esto es lo que tengo pero no me sale, y el metodo que tengo para abrir el dialogo es:

Código Javascript:

protected void GVProductos_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
        {
            //int OrderId = Convert.ToInt32(GVProductos.DataKeys[e.NewSelectedIndex].Value);                                    
            PopPupEditProduct.Show();               
        }
 

Código Javascript:

<asp:HiddenField ID="HiddenPopPup" runat="server" />
 
    <asp:ModalPopupExtender ID="PopPupEditProduct" runat="server" 
        PopupControlID="PanelEditProduct" TargetControlID="HiddenPopPup" BackgroundCssClass="">
    </asp:ModalPopupExtender>
 
    <asp:Panel ID="PanelEditProduct" runat="server" BackColor="White">
        <asp:UpdatePanel ID="UpdatePanelEdit" runat="server">
            <ContentTemplate>
                <div>
                    <div>
                        Editar registro Nro: <asp:Label ID="LblId" runat="server" Text="Label"></asp:Label>
                    </div>
                    <div>
                        <table>
                            <tr>
                                <td align="center" colspan="4"></td>                                
                            </tr>                                                                                   
                            <tr>
                                <td><asp:Label ID="LblDate" runat="server" Text="Fecha:"></asp:Label></td>
                                <td><asp:TextBox ID="txtDate" runat="server"></asp:TextBox></td>
                                <td>
                                    <asp:ImageButton runat="Server" ID="btnDateCalendar" ImageUrl="~/images/cal.gif" />
                                    <asp:CalendarExtender ID="CalDate" runat="server" TargetControlID="txtDate"  PopupButtonID="btnDateCalendar" Format="dd/MM/yyyy">
                                    </asp:CalendarExtender>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="style2" colspan="4" align="right">
                                    <asp:Button ID="btnActualizar" runat="server" Text="Actualizar" />
                                    <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" />
                                </td>                                
                            </tr>                       
                        </table>
                    </div>                
                </div>
            </ContentTemplate>            
        </asp:UpdatePanel>
    </asp:Panel>
 

[Alexis_Mejias]

Te sugiero hacer lo siguiente:

Usa el ModalPopupExtender en la misma Fila de donde esta la imagen. algo asi

Código:

<asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:ImageButton ID="btnUpdate" runat="server" ImageUrl="~/images/editar.gif" Width="15px" Height="15px" CommandName="SelectUpdate" />
<asp:ModalPopupExtender ID="PopPupEditProduct" runat="server" 
        PopupControlID="PanelEditProduct" TargetControlID="HiddenPopPup" BackgroundCssClass="">
    </asp:ModalPopupExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>

Luego Usas en el VB o en el Cs:
En el Evento rowDataBound de la grilla

Código:

Dim iBehavior As AjaxControlToolkit.ModalPopupExtender = e.Row.FindControl("PopPupEditProduct")
                        iBehavior.BehaviorID = "BHVID_" & e.Row.RowIndex
                        btnUpdate.OnClientClick = "LlenaValores('" & e.Row.DataItem("forID") & "', '" & e.Row.DataItem("Correlativo").ToString & "', '" & e.Row.DataItem("friID").ToString & "'); return false;"

Y en el Javascrpt usas unos Campos Ocultos y los llenas Asi

Código:

<script>
    function LlenaValores(forID, Correlativo, FriID)
    {
        document.getElementById("<%=hdnForID.clientID %>").value = forID;
        document.getElementById("<%=hdnCorrelativo.clientID %>").value = Correlativo;
        document.getElementById("<%=hdnFriID.clientID  %>").value = FriID ;
    }
</script>

Espero te sirva... saludos!!

[DeivisAndres]

Bueno, disculpa por la tardanza, y gracias por tu sugerencia, pero parece que ya lo resolví, pues me costo pero lo resolví y me salí muy bueno... de verdad gracias...

Solucionado...