Modifying GridView data using Jquery doesn't persist back to Server events

Question

Hi, So i have an ASP.NET GridView control in which each column is a 'BoundField'. I did not create a TemplateField(ItemTemplate/EditItemTemplate), because i was planning on using JQuery to convert the BoundField row to a 'Edit' field by just converting the text in each cell to a textbox or textarea when that row was clicked. This is done all client side.

So far all the client side stuff works great. But I have a 'Save' button on each row of the grid that triggers an eventhandler on the server side. In that server side method, i try to grab values of that current row, but they are all the OLD cell values before I modified the fields/data using jquery/javascript.

When i iterate through each cell of the row, it's the same state as it was when it was rendered.

So what i'm trying to understand is. Why do all of this fancy javascript/jquery stuff when the state of the Grid stays exactly as it was when it was rendered when posting back to the server ?

someone please shed some light on this!!! Thanks!

Answer 1

Do you have viewstate on or off? How and when are you binding the GridView?

Answer 2

The GridView controls uses ViewState to persist its state between postbacks. When you do a postback it loads its previous state from the ViewState. Changes that you do via client-side Javascript are ignored. This is simply how the control works.

If you want to keep using the GridView control with inline editing, the easiest option would be to move to edit mode via a postback.

Another option is to have the fields in each row to begin with, only hidden. Then, you could show them via Javascript. You'll be able to access the values on the server.

Yet another option is not use a postback but an Ajax call, so that the grid is not re-rendered when you click the button. But that means you would have to manually collect the values from the grid via client-side code and pass it to the server.