How to iterate through GridView rows SharePoint2013 WebPart

Question

I have a GridView called myGrid, I am retrieving some list items and adding them to GridView but I have set the rowlimit of my GridView to 10. So when the page is loaded, the myGrid comes with 10 rows. which looks like this:

When I click at View next ten comments through an AJAX call to a [WebMethod] I am appending myGrid with next 10 items with javascript, which looks like this:

But now when I click at Proccess button it calls an C# function and I am iterating throughout all grid rows with following code:

protected void Proccess_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in myGrid.Rows)
    {
           //TODO logic
    }
}

when button is clicked I can see only 10 rows that were added first, which means rows added with ajax function(javascript) are not being shown to process.

Answer 1

Javascript is purely client side and C# will not be able to see changes via javascript. you would need to add the rows not with javascript but to the GridView and have AJAX refresh the page.

Answer 2

This issue is because of ViewState of the control.

Any changes you make Client Side doesn't get added to the ViewState and thus during post back that data is not sent to the server.

Two options to resolve this

1. Get rid of the ajax call and use the PostBack to load and append that next 10 items
2. When process is clicked first using jQuery read the items on the Grid and put it on a Hidden control and read it from the server click event.