Dynamic addition of new rows in GridView

The principle of adding rows dynamically in the gridview is to use the datatable to add new columns and then bind them again;
Design source code
Design the gridview code
 
<Asp: GridView ID = "gvFrontendTypeSetting" runat = "server" AutoGenerateColumns = "false"
CssClass = "table" OnRowDeleting = "gvFrontendTypeSetting_RowDeleting">
<Columns>
<Asp: TemplateField HeaderText = "no.">
<ItemTemplate>
<Div align = "center">
<Asp: TextBox ID = "txtSerialNumber" runat = "server" Width = "20px" Text = '<% # Eval ("serialNumber") %>'
BorderStyle = "None"> </asp: TextBox>
</Div>
</ItemTemplate>
</Asp: TemplateField>
<Asp: TemplateField HeaderText = "item filter type">
<ItemTemplate>
<Asp: TextBox ID = "txtType" runat = "server" Text = '<% # Eval ("type") %> 'borderstyle = "None"> </asp: textBox>
</ItemTemplate>
<ItemStyle Width = "100px"/>
</Asp: TemplateField>
<Asp: TemplateField HeaderText = "modification time">
<ItemTemplate>
<Div align = "center">
<Asp: Label runat = "server" ID = "lblModificationTime" Text = '<% # Eval ("modifiedTime") %>'
BorderStyle = "None"> </asp: Label>
</Div>
</ItemTemplate>
</Asp: TemplateField>
<Asp: TemplateField HeaderText = "modifier">
<ItemTemplate>
<Div align = "center">
<Asp: Label runat = "server" ID = "lblModificationName" Text = '<% # Eval ("modifiedName") %>'
BorderStyle = "None"> </asp: Label>
</Div>
</ItemTemplate>
</Asp: TemplateField>
<Asp: TemplateField HeaderText = "operation">
<ItemTemplate>
<Div align = "center">
<Asp: Button ID = "btnDel" runat = "server" Text = "delete" CommandName = "delete"/>
<Asp: Button ID = "btnEdit" runat = "server" Text = "modify" CommandName = "Edit"/>
</Div>
</ItemTemplate>
</Asp: TemplateField>
</Columns>
</Asp: GridView>
First, we need to create a new table and a new column during initialization so that a new column can be used during initialization.
 
/// <Summary>
/// Init the gvFrontendTypeSetting to show
/// </Summary>
Private void InitGVFrontendTypeSetting ()
{
// Create a datatable instance
DataTable tbScratchCard = new DataTable ();
// Column one
DataColumn colSerialNumber = new DataColumn ();
ColSerialNumber. DataType = System. Type. GetType ("System. Int32 ");
ColSerialNumber. ColumnName = "serialNumber ";
// Column two
DataColumn colType = new DataColumn ();
ColType. DataType = System. Type. GetType ("System. String ");
ColType. ColumnName = "type ";
// Column three
DataColumn colModifiedTime = new DataColumn ();
ColModifiedTime. DataType = System. Type. GetType ("System. DateTime ");
ColModifiedTime. ColumnName = "modifiedTime ";
// Column four
DataColumn colModifiedName = new DataColumn ();
ColModifiedName. DataType = System. Type. GetType ("System. String ");
ColModifiedName. ColumnName = "modifiedName ";

// DataColumnCollection
DataColumn [] cols = {colSerialNumber, colType, colModifiedTime, colModifiedName };
// Add columns to the table tbScratchCard
TbScratchCard. Columns. AddRange (cols );
// Add a new row to the table tbScratchCard
TbScratchCard. Rows. Add (tbScratchCard. NewRow ());
TbScratchCard. Rows [0] ["serialNumber"] = tbScratchCard. Rows. Count-1;
TbScratchCard. Rows [0] ["modifiedTime"] = DateTime. Now;
TbScratchCard. Rows [0] ["modifiedName"] = (User) Session ["user"]). AccountName;
ViewState ["tbCategory"] = tbScratchCard;
// Bind the table to the gridview
GvFrontendTypeSetting. DataSource = tbScratchCard;
GvFrontendTypeSetting. DataBind ();
}
If you need to assign values to a column during initialization, such as the current time and the current user, you can assign values to the value of the first row, at the same time, we need to give the created able structure to viewstate or session so that we can add and delete new rows in the future, with the above code, we can see the interface we designed during initialization, and a new line has been initialized.
Click Add row
 
/// <Summary>
/// Add rows
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void btnAddType_Click (object sender, EventArgs e)
{
DataTable tbCategory = (DataTable) ViewState ["tbCategory"];
For (int I = 0; I <= tbCategory. Rows. Count-1; I ++)
{
TbCategory. rows [I] ["serialNumber"] = Convert. toInt32 (TextBox) gvFrontendTypeSetting. rows [I]. cells [0]. findControl ("txtSerialNumber ")). text );
TbCategory. Rows [I] ["type"] = (TextBox) gvFrontendTypeSetting. Rows [I]. Cells [0]. FindControl ("txtType"). Text;
TbCategory. Rows [I] ["modifiedTime"] = (Label) gvFrontendTypeSetting. Rows [I]. Cells [0]. FindControl ("lblModificationTime"). Text;
TbCategory. Rows [I] ["modifiedName"] = (Label) gvFrontendTypeSetting. Rows [I]. Cells [0]. FindControl ("lblModificationName"). Text;
}
// Add new row
TbCategory. Rows. Add (tbCategory. NewRow ());
TbCategory. Rows [tbCategory. Rows. Count-1] ["serialNumber"] = tbCategory. Rows. Count-1;
TbCategory. Rows [tbCategory. Rows. Count-1] ["modifiedTime"] = DateTime. Now;
TbCategory. Rows [tbCategory. Rows. Count-1] ["modifiedName"] = (User) Session ["user"]). AccountName;
ViewState ["tbCategory"] = tbCategory;
// Bind the table to the gridview
GvFrontendTypeSetting. DataSource = tbCategory;
GvFrontendTypeSetting. DataBind ();
}
Here we first need to get the datatable data structure we created during initialization, and then we get the data filled in by the user, mainly because, when users modify data, we can dynamically obtain the value modified by users, avoiding the inconvenience caused by adding a new row to save a row. After saving the data to the able, we add a new row. Similarly, we need to initialize some initial values and add new rows, we need to assign the data structure to viewstate or session and then bind it to the gridview, so that we can dynamically add new rows;
 
Let's try another code to dynamically delete a row, as shown below:
 
/// <Summary>
/// Delete
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void gvFrontendTypeSetting_RowDeleting (object sender, GridViewDeleteEventArgs e)
{

Int number = Convert. ToInt32 (TextBox) gvFrontendTypeSetting. Rows [e. RowIndex]. FindControl ("txtSerialNumber"). Text );
DataTable tbCategory = (DataTable) ViewState ["tbCategory"];
For (int I = 0; I <= tbCategory. Rows. Count-1; I ++)
{
If (Convert. ToInt32 (tbCategory. Rows [I] ["serialNumber"]) = number)
{
TbCategory. Rows. RemoveAt (I );
}
}
ViewState ["tbCategory"] = tbCategory;
GvFrontendTypeSetting. DataSource = tbCategory;
GvFrontendTypeSetting. DataBind ();
}
Here we first need to find the value that uniquely identifies this row of data in the gridview, then obtain the data structure of the datatable, and then cycle in the datatable according to the unique mark of the row of the gridview data, if the rows in the gridview of a row with the same field values are uniquely identified, the current row is removed, the modified data structure is also bound to viewstate or session, and then re-bound;
 
In general, we need to establish the data structure during initialization, create a new row, and send the data structure to viewstate or session. If we do other operations, we need to first activate the data structure, after making other modifications, You need to assign the new data structure to viewstate or session to update viewstate or session in real time and then bind it.
 
Author: "Shenzhou long"