单击gridview行而不使用按钮时不显示模态弹出窗口

Question

I need to display a modal popup when gridview row is clicked(without any buttons), i managed to display popup by clicking the gridview row but dont know to bind values to textbox displayed in modal popup.. So i need help to

1. Bind gridview row(when clicked) values to modal popup textboxes
2. Modal popup textboxes should only be editable when a edit button(placed at bottom of modal popup) is clicked
3. After editing work is done, it should save the edited data when clicked save button(placed at bottom next to edit button)

As am new to asp.net please try to help me with your suggestions for my requirements. Because of below code am able to show popup wen clicked gridview row but suggest me how to bind values to textbox:

protected void grid_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            GridViewRow row = e.Row;

            if (row.DataItem == null)
            {
                return;
            }

            try
            {
                switch (e.Row.RowType)
                {
                    case DataControlRowType.Header:
                        break;

                    case DataControlRowType.DataRow:
                        e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand'");
                        e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(grid, "Select$" + e.Row.RowIndex.ToString()));
                        e.Row.Attributes.Add("onclick", String.Format("javascript:$find('{0}').show();", ModalPopupExtender2.ClientID));


                        TextBox1.Text = grid.SelectedRow.Cells[0].Text;
                        TextBox2.Text = grid.SelectedRow.Cells[1].Text;
                        TextBox3.Text = grid.SelectedRow.Cells[2].Text;
                        TextBox4.Text = grid.SelectedRow.Cells[3].Text;
                        TextBox5.Text = grid.SelectedRow.Cells[4].Text;

                        ModalPopupExtender2.Show();
                        break;
                }
            }

            catch
            {
                return;
            }
        }

HTML CODE:

<asp:Panel ID="editpanel" runat="server">
            <table width="850px" border="1" class="color">
            <tr>
            <td align="center">
            <asp:Label ID="Label1" runat="server" Text="Firstname" Width="150px"></asp:Label>
            <asp:Label ID="Label2" runat="server" Text="Surname" Width="150px"></asp:Label>
            <asp:Label ID="Label3" runat="server" Text="Visits" Width="150px"></asp:Label>
            <asp:Label ID="Label4" runat="server" Text="$ Speed" Width="150px"></asp:Label>
            <asp:Label ID="Label5" runat="server" Text="Points" Width="150px"></asp:Label>
            <asp:ImageButton id="ImageButton1" runat="server" src="close.png" onclick="close_Click" style="float:right; height: 16px;" ToolTip="To close window"/>
            </td>
            </tr>
            <tr>
            <td>
            <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server"  ></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server" ></asp:TextBox>
            <asp:TextBox ID="TextBox4" runat="server" ></asp:TextBox>
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            </td>
            </tr>
            <tr>
                <td>
                        <asp:ImageButton ID="cancell" runat="server" onclick="cancell_Click"  
                        src="cancel.jpg" style="float:right; width: 16px;" 
                        ToolTip="To cancel member" />                    
                    <asp:ImageButton ID="tickk" runat="server" onclick="tickk_Click" src="tick.jpg" 
                        style="float:right; height: 16px;" ToolTip="To save member" />            
                     <asp:ImageButton ID="Edit" runat="server" onclick="edit_Click"  
                        src="edit.jpg" style="float:right; height: 16px; width: 16px;" 
                        ToolTip="To edit member" />
                </td>
                </tr>
            </table>   
            </asp:Panel>
    <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="modal2" PopupControlID="editpanel" BackgroundCssClass="modalBackground"></asp:ModalPopupExtender>


       <asp:ImageButton ID="modal2" runat="server" src="addmember.jpg" OnClick="modal2_click" Text="modal2" style="display:none;"/> // have created a dummy image button

Since am new to asp.net please try to help me with your suggestions.

Answer 1

Use this to bind your data with text box by using BindingSource (Just an example):

textBoxid.DataBindings.Add(new Binding("Text", customersBindingSource, "ID"));
textBoxname.DataBindings.Add(new Binding("Text", customersBindingSource, "NAME"));
textBoxcity.DataBindings.Add(new Binding("Text", customersBindingSource, "City"));

To make uneditable your text boxes, use this:

private void EditButton_Click(object sender, EventArgs e)
        {
            if (textBoxid.ReadOnly == true)
            {
                textBoxid.ReadOnly = false;
                //how many text boxes you have, do the same here
            }
            else
            {
                textBoxid.ReadOnly = true;
                //how many text boxes you have, do the same here
            }
        }

To save your edits, just run an UPDATE query with all your new data.