Editable grid that does not save on every edit

[NickThissen]

Hi,

I am in need of a very simple grid which the user should be able to edit very quickly. The grid will display a list of food items (name and price) that make up a menu.

My usual approach here is just a GridView bound to a collection of the food items with an Edit button to the left of every row. When the Edit button is clicked I navigate to an Edit page where the user can edit that item and click OK to save it to the database and then go back to the grid page, where the grid is reloaded and shows the edited item.

This approach however is much to slow, the user should be able to edit the grid much more quickly, ideally without posting back (either fully, partially or via ajax).

What I'm thinking is really simple, but I don't have the necessary javascript skill to create this...:

A UserControl that simply creates a new row of TextBoxes for every food item (along with maybe a Delete button). The 'grid' is thus always in 'edit mode' (it always shows the textboxes in every row) and the user can type in any textbox to change the name or price. When this change is made, nothing happens server side, yet. When the user presses Save, I finally run a save method that just checks all rows and saves the new values to the database.

Since the grid is so simple (just Name and Price and the underlying data has a unique Id as well obviously) I think this should be possible, but I wouldn't know how to create this...


I did try, I had a UserControl 'MenuGrid' that was nothing but a PlaceHolder (and two labels for the 'Name' and 'Price' menu headers). It has a DataSource property that I set to a collection of food items in the menu, and then for each of those food items I add a MenuGridRow (another UserControl) to the Placeholder. This MenuGridRow contains two TextBoxes and the Delete button. It also contains a HiddenField control that gets the Id of the food item.


Loading works fine, I can get all the data in this 'grid', but I don't see any way to save it back. Once I changed the items and want to Save on the server, I don't see any way to access the MenuGridRows from the MenuGrid (let alone accessing the TextBoxes on that in turn). I think the problem is that it's all just rendered to html and during runtime there is no such thing as a MenuGrid or MenuGridRow anymore. So all I have is a couple of TextBoxes with seemingly random names and there's no way for me to determine which Textbox belongs to which HiddenField (which contains the Id).

Also, I don't see any way to handle the deleting of a row; I was thinking to just run some javascript that deletes the MenuGridRow from the MenuGrid, but again same problem, there's no such thing as a MenuGridRow at that point and I'd have to figure out which TextBoxes and HiddenField belong to that row and then delete them via javascript.


I tried looking for an editable ajax enabled grid as well, so I don't have to do it all by myself, but I didn't really find anything useful. Most of the grids I found don't even work properly, some work but are still very slow (there's still a postback, they just put the grid in an UpdatePanel but that doesn't make it any faster).

If anyone knows a good grid for this let me know!

Thanks

[gep13]

Hello,

There are plenty of good Grids out there, for instance:

http://demos.telerik.com/aspnet-ajax...FUgKfAod-Sqt8Q

But I am assuming that this type of thing is out of the question, right?

Here is one example that you might want to take a look at:

http://www.codeproject.com/KB/aspnet...tGridView.aspx

And also you might want to take a look at SlickGrid:

https://github.com/mleibman/SlickGrid/wiki

If you search these forums, you will find a number of thread where this is used as a replacement to the standard ASP.Net GridView.

Gary