Adding a new row in between rows in a grid view.

Question

I have an ASP .net grid view. It has some template columns like a command button, a text box, and a dropdown control. When I click the command button, a new row needs to be inserted below the current row (from where I hit the command button).

If I have rows 1 and 2 and I hit the command button in row1 a new row needs to be inserted between rows 1 and 2

Now in the new row I should be able to select values from dropdown and enter some value in a text box and finally hit my save button. (Which should work fine as I am expecting)

The grid view is bound to some data source say for instance a datatable for now.

Oneway that I could think about is when Command button is clicked, I can add a new row to the datatable in my server side code and rebind the grid. But I am not sure that, from a UI perspective how I can make sure that the new row goes exactly below the row from where I hit the command button.

Any thoughts or comments?

Answer 1

You have to sort the datasource by an virtual index saved in an invisible column. On first databound(perhaps you take a DataView because of ots sorting capability) it will set to the original rowindex. After first hit of the save button you get the datatable again from database and add the additional row with an index after the "selected" row. Then you bind the GridView again with the sorted DataView.

I think you need another invisible column to detect the "temporary" row. If you dont need to edit the "normal" rows then you can use edititemtemplate for this. Otherwise you can make the dropdown and textbox visible and the other controls invisible in GridView.OnRoawDataBound.

Answer 2

I think a much easier approach will be if you try to add the row in your data source and then bind to the GridView again. This is easy if you have DataSet or a custom entity collection. Since, you are using DataTable this will also work. Handle the click event and find the row that the user clicked. Go back to the dataTable and add an empty row there. This will make sure that the controls inside the GridView are persisted and you don't have to worry about adding DropDown controls etc.