[jQuery] GridView - Find next and previous rows

[NickThissen]

Hi,

I am trying to build myself a grid that displays some very simple data (a name and a price of food items on a menu) which the user can very easily edit. The idea is that the grid is always editable, and editing, deleting, adding a new row and hopefully swapping two rows can be done without posting back to the server (at all, not even in an update panel or something).


So far I managed to get deleting to work, but it requires a bit of an explanation. I have a pretty good idea of how to implement adding new rows so I will try that myself. The problem at the moment is swapping rows.


Be warned, this post is very long, but the questions at the end might be simple to answer even without any background information. I'm still going to provide the background information though, you will most probably need it. If you don't have time, can't be bothered to read it, or whatever, look for a bold line "TOO LONG TO READ" at the bottom and start there; the two questions are there.



First of all, the data I am displaying in the grid are instances of the MenuItem class, which has properties:

• Id (integer, unique identifier)
• Name (string)
• Price (float)

I'll explain this step by step:


Saving updates

The grid is a GridView with 6 rows:

• TemplateField with 'move up button'
• TemplateField with 'move down button'
• TemplateField with HiddenField that contains the unique Id of the menu item
• TemplateField with a TextBox that contains the Name of the menu item
• TemplateField with a TextBox that contains the Price of the menu item
• TemplateField with a 'delete' button

So while there's 6 rows, the third row is invisible because it only contains a HiddenField. The HiddenField is there so I can find the Id of the menu items in javascript.

<asp:HiddenField runat="server" ID="hfIds" />
 
            <asp:GridView runat="server" ID="grid" AutoGenerateColumns="False" 
                onrowcommand="grid_RowCommand" onrowdeleting="grid_RowDeleting">
                <Columns>
 
                    <!-- Move Up button -->
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton runat="server" OnClientClick="return false;">
                                <asp:Image ImageUrl="~/Images/moveUp.png" AlternateText="moveUp" runat="server" CssClass="moveUp" ID="moveUp" />
                            </asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    
                    <!-- Move Down button -->
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton runat="server" OnClientClick="return false;">
                                <asp:Image ImageUrl="~/Images/moveDown.png" AlternateText="moveDown" runat="server" CssClass="moveDown" ID="moveDown" />
                            </asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                    
                    <!-- ID Hidden Field -->
                    <asp:TemplateField>
                        <ItemTemplate>
                                <asp:HiddenField runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
 
                    <!-- Name textbox field -->
                    <asp:TemplateField HeaderText="Naam">
                        <ItemTemplate>
                                <asp:TextBox runat="server" Width="200px" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
 
                    <!-- Price textbox field -->
                    <asp:TemplateField HeaderText="Prijs">
                        <ItemTemplate>
                                <asp:TextBox runat="server" Width="50px" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
 
                    <!-- Delete button -->
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:LinkButton runat="server" OnClientClick="return false;">
                                <asp:Image ImageUrl="~/Images/delete.png" AlternateText="delete" runat="server" CssClass="delete" ID="delete" />
                            </asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

As you can see, there's no regular BoundFields or labels, everything editable (name and price) is in a TextBox all the time so the user can edit it whenever he wants.
Obviously when he makes an edit, nothing happens on the server.

When the user now clicks the Save button (a regular button on the bottom of the page), I run a Save method which does this:

• Loop through every row in the grid
• Find the Id, Name and Price via the controls on that row
• Retrieve the menu item from the database with the specified Id (if none is found, I create a new MenuItem)
• Save it to the database

Or, in code:

int sortId = 0;
            foreach (GridViewRow row in grid.Rows)
            {
                // Find the controls that contain the Id, Name and Price:
                var idHf = (HiddenField) row.Cells[IDFIELD_INDEX].Controls[1];
                var nameTb = (TextBox)row.Cells[IDFIELD_INDEX + 1].Controls[1];
                var priceTb = (TextBox)row.Cells[IDFIELD_INDEX + 2].Controls[1];
 
                // Find the values
                int id = int.Parse(idHf.Value);
                string name = nameTb.Text.Trim();
                float price = float.Parse(priceTb.Text); // Should use TryParse, irrelevant at the moment
            
                // Retrieve the MenuItem by Id, or create a new one if it doesn't exist
                var menuItem = menuItems.FromId(id);
                if (menuItem == null) menuItem = new MenuItem();
                
                // Set new values
                menuItem.Name = name;
                menuItem.Price = price;
                menuItem.SortId = sortId;
 
                // Increment sort id (grid will be sorted by this sort id)
                sortId++;
 
                // Save to database
                MenuItemManager.Instance.Save(menuItem);                            
            }

This happens only when the Save button is clicked, not every time an edit is made.

NOTE: Obviously this will fail horribly when there's other stuff on the page that might trigger a postback (the grid will be reloaded and the edited values lost), but there's not, so don't worry about that.

Anyway, this works fine, on to deleting.


Deleting rows
To delete a row, I had the following train of thought:

• When the Delete button is clicked, find the row that belongs to that button
• Find the hidden field that stores the Id (in the third column)
• Append this Id to another HiddenField (this one on the page itself) so I can see later which Ids are to be removed from the database
• Remove the row from the table (grid)

After some fiddling around, a slightly modified version seems to work very well. The delete button is actually an empty LinkButton with an Image inside, and I found some jQuery code that responded to a click on an image in a grid and found the row that belonged to that image. I'm sure I could have done the same with the LinkButton directly, but the image works too.
I can use the jQuery code to find the first input field in this row (which in this case is the Id hidden field), so that's what I did. Then I delete the row (again via jQuery) and append the Id to the other hidden field:

$(document).ready(function () {

            $('table td img.delete').click(function () {

                if (confirm('Are you sure you want to delete this row?')) {

                    // Get the hidden field that stores the IDs to delete later
                    var hf = document.getElementById('<%= hfIds.ClientID %>');

                    // Get the hidden field in the grid row that contains the ID of the clicked item
                    var itemHf = $(this).parent().parent().parent().find(':input');

                    // Append the ID to the list of IDs (separated by | character) in the hidden field
                    hf.value = hf.value + "|" + itemHf.val();

                    // Remove grid row
                    $(this).parent().parent().parent().remove();
                }

                return false;
            });
    });

This also works. The grid row is deleted visually on the page and the Id is appended to the HiddenField 'hfIds'.
I had to modify the Save method because the 'deleted' row is actually still in the grid.Rows collection. Luckily, the value in the Id hidden field (in the third column) is cleared, so that I can see from this that this is a deleted row.
Then, after saving the remaining rows, I parse the 'hfIds' hidden field (split it by |) and remove each id from the database:

int sortId = 0;
            foreach (GridViewRow row in grid.Rows)
            {
                // Find the controls that contain the Id, Name and Price:
                var idHf = (HiddenField) row.Cells[IDFIELD_INDEX].Controls[1];
                var nameTb = (TextBox)row.Cells[IDFIELD_INDEX + 1].Controls[1];
                var priceTb = (TextBox)row.Cells[IDFIELD_INDEX + 2].Controls[1];
 
                if (idHf.Value == "")
                {
                    // This is a deleted row! Skip it, we don't need to save it
                    continue;
                }
                
                // Find the values
                int id = int.Parse(idHf.Value);
                string name = nameTb.Text.Trim();
                float price = float.Parse(priceTb.Text); // Should use TryParse, irrelevant at the moment
            
                // Retrieve the MenuItem by Id, or create a new one if it doesn't exist
                var menuItem = menuItems.FromId(id);
                if (menuItem == null) menuItem = new MenuItem();
                
                // Set new values
                menuItem.Name = name;
                menuItem.Price = price;
                menuItem.SortId = sortId;
 
                // Increment sort id (grid will be sorted by this sort id)
                sortId++;
 
                // Save to database
                MenuItemManager.Instance.Save(menuItem);                            
            }
            
            // When we are done saving, we retrieve the Ids 
            // of the menu items that need to be deleted from the database:
            
            // hfIds.Value contains something like '|3|4|16|93'
            // this indicates rows 3, 4, 16 and 93 need to be deleted
            
            var removeIds = hfIds.Value.Split(new[] {'|'}, StringSplitOptions.RemoveEmptyEntries);
            foreach (var strId in removeIds)
            {
                int id = int.Parse(strId);
                MenuItemManager.Instance.DeleteById(id);
            }

It works!


Moving rows:

To move rows up or down I came up with the following idea (assuming moving a row up, but down works the same way):

• Find the Id, Name and Price of the row where the 'move up' button was clicked (same as before with a twist)
• Find the previous row
• Find the Id, Name and Price of the previous row
• Simply swap the values (swap id of current row with id of previous row, same for name and price)

That should be it if I'm not mistaken. The Save method will work the same way.



TOO LONG TO READ, CONTINUE HERE:

I have two problems with this approach though (finally, my question...)



1. I have a table with some rows which contain LinkButtons. I am handling a click event of an image in such a LinkButton.
I can get the row of the button that was clicked using this jQuery:

var row = $(this).parent().parent().parent();

the first parent is the LinkButton (remember, I'm handling the click event of an image in the LinkButton), the second is the cell and the third is the row.

But how do I get the previous or next row in the table?



2. I can get the hidden field in the row that contains the Id using this:

var hf = $(this).parent().parent().parent().find(':input');

I don't really understand, but I interpret the 'find' as returning the first element that is an input element, in this case that is the hidden field. There's two images as well but those are not inputs so they aren't found. However, there's a name and price input after the hidden field, but I am assuming it returns the first element.

How do I find the second and third input elements? I will also need the name and price inputs if I want to swap them with the previous row, but as far as I can see this only gives me the first input, I need them all!



Thanks for any help!