[jQuery] GridView - Find next and previous rows

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 Code:

<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:

csharp 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:

Code:

---

$(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:

csharp 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];
 
                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:

Code:

---

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:

Code:

---

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!

Hello,

I will be honest and say that I have not read all of your thread, however, as I posted in your other thread, it would appear that you are on the brink of trying to do "stuff" that the GridView, and associated ASP.Net Server controls were not meant to do.

Rather than fight with the ASP.Net controls, why not forget about using them at all. There are a number of client side grids out there, such as SlickGrid, that you can bind to the result of a JSON request from the server, and then do all the necessary work on the client, and when required, post back to the server.

Just a thought.

Gary

Thanks. I think I have most of it figured out by now though, it seems to work quite well.

As for an answer to my own question, it was simpler than I thought it would be (as always with jQuery...), to get the next or previous row I just call 'next()' or 'prev()' on the row :p

Getting the next input elements (name and price) was a bit harder but I got there in the end, I retrieve the first element first, then find the closest table cell (td), find the next table cell, and then find the first input on that again, something like this:

Code:

---

var row = $(this).closest('tr');
var idInput = row.find(':input');
var nameInput = idInput.closest('td').next('td').find(':input');

---

I've got deleting and moving rows working now perfectly. Inserting a new row still requires a postback though (I can add a row via javascript, but it never shows up in the grid.Rows collection after the postback so there's no way for me to get the values), and while that isn't TOO much of a problem, it requires me to save the edited values first (otherwise they are lost), and the user cannot undo that action then by canceling (leaving the page without saving)... I'm still looking for ideas there.