Home
GridView Editable AutoGenerateColumns
Blog Date 13 May 2021
The Code
HTML
<asp:GridView
ID="MyGrid"
AutoGenerateEditButton="true"
OnRowEditing="MyGrid_RowEditing"
OnRowUpdating="MyGrid_RowUpdating"
OnRowCancelingEdit="MyGrid_RowCancelingEdit"
runat="server" />
C#
protected void MyGrid_RowEditing(object sender, GridViewEditEventArgs e)
{
MyGrid.EditIndex = e.NewEditIndex;
FillGrid();
}
protected void MyGrid_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
List<List<string>> DataFile = FileFix.GetFile(Session["DataFile"] as string);
int MyIndex = MyGrid.EditIndex;
GridViewRow MyRow = MyGrid.Rows[MyIndex];
int ColCount = DataFile[MyIndex].Count;
for(int i = 1; i < ColCount + 1; i++)
{
TextBox x = MyRow.Cells[i].Controls[0] as TextBox;
DataFile[MyIndex][i - 1] = x.Text;
}
FileFix.SaveFile(Session["DataFile"] as string, DataFile);
MyGrid.EditIndex = -1;
FillGrid();
}
protected void MyGrid_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
MyGrid.EditIndex = -1;
FillGrid();
}
Say What?
GridViews huh? In the bad old days we started out with DataGrids in ASP.Net. Now, well now we have and can still use and there's nothing wrong with DataGrids. But times have moved on and GridView is the shiny new (to me at least but I am 30 years out of date) way to quickly display 2 dimensional data.
So you've got your data either from SQL or a DataTable or similar. You connect the data to the GridView in the usual manner
MyGrid.DataSource = MyDataTableOrSQL;
MyGrid.DataBind();
And, without any formatting your data will be magically dropped into a simple HTML table for display purposes. Now we want to edit this data in the GridView.
In the HTML of the GridView you will find the following...
AutoGenerateEditButton="true"
OnRowEditing="MyGrid_RowEditing"
OnRowUpdating="MyGrid_RowUpdating"
OnRowCancelingEdit="MyGrid_RowCancelingEdit"
...so let me explain.
AutoGenerateEditButton causes the GridView to add a column to the front of the table. Within this column is a simple humble link that reads "Edit". If you click the Edit link this causes OnRowEditing to call MyGrid_RowEditing in the code behind.
In MyGrid_RowEditing we have 2 simple tasks.
MyGrid.EditIndex = e.NewEditIndex;
FillGrid();
First off we set the GridView's EditIndex. This I presume tells the GridView that line such and such in the GridView is to be made Editable by the substitution of textboxes in place of the regular text. e.NewEditIndex will the the GridView's reference to the index of choice passed when the Edit link was clicked.
The FillGrid() section is a call to RE-BIND the data you used to create the GridView. What you need to say is "right, from now on MyGrid will be normal EXCEPT for this particular line which well have textboxes instead. Get that? Now go and re-do the table again, remembering to set one particular line to textboxes. Off you go..."
When the page reloads it will look the same except for the one line where you clicked Edit. Now that line will start with Update Cancel links and the data will be in textboxes. Great.
You change the data in the textboxes, now you want to update the data in the datatable or the SQL. When you click Update this calls
OnRowUpdating="MyGrid_RowUpdating"
Now you're in the void of MyGrid_RowUpdating. Here is where you will save your data. It could be an SQL call or a change to the datatable.
BUT WAIT!! How do I get to, access and process what has been typed in the textboxes? Urgh this is where it gets poopy.
The GridView has a property of EditIndex. This is the line or row that has been edited. Then there's GridViewRow which gets all the data from that row. So we get the data from the edited row
GridViewRow MyRow = MyGrid.Rows[MyGrid.EditIndex]
Now MyRow is everything that is in the edited row. The textboxes are in there.
We could use
TextBox MyTextBox = MyRow.FindControls("ColumnName") as TextBox
Which is fine if you've hard named your columns. But in this instance the columns have been AutoGenerated. HA. So now we reference their index. NOTE WELL. For reasons far beyond me the count, which usually starts at 0... starts a 1
TextBox x = MyRow.Cells[1].Controls[0] as TextBox;
TextBox x = MyRow.Cells[2].Controls[0] as TextBox;
And so on. You could of course loop through these using a for loop.
You get your data out of the textboxes and save it as is your need.
Finally set the EditIndex to -1. This says to the GridView "we done editing, don't set any lines to be textboxes just make like normal". This also applies to the Cancel button too.
If you need a nerd contact ren@techsolus.co.uk
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home