When you open a panel, it might be a good idea to ditch the entire template and auto-editing system. For quick and simple solutions, the built-in GV events are fantastic for getting started.

Once you understand how everything works, you can code your way through this and end up with less code, markup, and hassle!

You can even get rid of the GV "row" handler since it doesn't offer much help here.

For an even better approach, just add a basic edit button - even an asp.net one will do. You don't need anything more complicated! Adding buttons to the GV gives each button its own click event, similar to any other control or button in the GV.

If you're looking to navigate and edit the GV like Excel, I have a simple solution that doesn't rely on the built-in GV events.

Let's outline how this can work with minimal code.

You haven't specified the type of dialog you're using (there are many options, from jQuery.UI to AjaxToolkit), but I'll go ahead with jQuery.UI for this example.

Our goals:

- Eliminate the messy GV event model
- Use and write easy server-side code whenever possible
- Minimize JavaScript code usage

Now, I'll be using a few helper routines I've written in vb.net. They're short and easy to use, saving me from repeating the same code:

- Moving data between a data table and controls for editing
- Reversing the process above to save changes back to the database

Even without these "move to/from" routines, removing the GV events already simplifies the code significantly.

Let's consider a simple grid of hotels where we want an edit button on each row.

Here's the initial setup for our grid:

<div style="width:40%">
    <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
            <asp:BoundField DataField="LastName" HeaderText="LastName"  />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
            <asp:BoundField DataField="Description" HeaderText="Description"  />
            <asp:TemplateField HeaderText="Edit">
                <ItemTemplate>
                    <asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn" OnClick="cmdEdit_Click" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Some notes: I used wizards to create the initial setup and then adjusted the datasource settings. The PK row setting is now handled by `DataKeyNames="ID"` for maintaining the ID without exposing it in the markup.

Setting `CssClass="table"` adds Bootstrap styling to the GV, making it look nicer and responsive to div width.

The corresponding code includes:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GHotels.DataSource = MyrstP(cmdSQL)
    GHotels.DataBind()

End Sub

This results in:

https://i.sstatic.net/9kWxc.png

So far, so good.

For editing purposes, let's assume you're using some kind of popup system. I'll opt for jquery.UI as it works well compared to bootstrap dialogs.

After the GV, we'll set up a one-row editor within a hidden div, like this:

<div id="EditRecord" runat="server" style="float:left;display: none">
    <!-- Editor content goes here -->
</div>

Next, we define the contents of the editor with appropriate form elements such as textboxes, checkboxes, and buttons. Styling ensures a neat presentation.

Finally, we add a simple JavaScript function to handle popping up the editor:

<script>
    function PopEdit() {
        var myDialog = $("#EditRecord");
        myDialog.dialog({
            title: "Edit Hotel Information",
            modal: true,
            width: 860,
            appendTo: "form"
        });
    }
</script>

That wraps up the setup.

Regarding the row button click event, it involves retrieving the row details based on the clicked button and populating the editor with that information:

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim pkID = GHotels.DataKeys(gRow.RowIndex).Item("ID")

    ' SQL query to fetch hotel details based on PK ID
    Dim cmdSQL As New SqlCommand("SELECT * from tblHotelsA where ID = @ID")
    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = pkID
    Dim rstData As DataTable = MyrstP(cmdSQL)

    ' Loading the editor with fetched data and displaying it
    Call fLoader(Me.EditRecord, rstData.Rows(0))
    ViewState("rstData") = rstData
    ClientScript.RegisterStartupScript(Page.GetType(), "PopEditKey", "PopEdit()", True)

End Sub

The simplicity lies in loading data into controls and invoking the pop-up dialogue using only one line of jQuery.UI script.

For saving changes back to the database upon clicking the Save button, we have the following server-side code:

Protected Sub cmdSave_ServerClick(sender As Object, e As EventArgs)

    Dim rstData As DataTable = ViewState("rstData")
    Call fWriterW(EditRecord, rstData.Rows(0))
    Call SaveTable(rstData, "tblHotelsA")
    LoadGrid()

End Sub

The Cancel/Back button does not require much code due to the collapse behavior upon postback. Similarly, additional functionality like delete prompts can be implemented utilizing server-side VB code paired with jQuery.UI for a clean interface.

To streamline the process, helper routines like MyRstP, fLoader, fWriterW, and SaveTable simplify interactions with databases, controls, and user input.

By leveraging these routines and avoiding unnecessary complexity, handling data editing in the GridView becomes swift and efficient.