Adding New Record Inside DataGrid (C#)

.Net DataGrid does not support inserting since it is dependent on a datasource for its data. You can only update and delete after selecting a particular record from the grid. So the logic for adding a new record on the datagrid is to fill the dataset from the database and inserting a blank row on the datatable.

First, you have to create a DataGrid and then bind it on a DataSet:

SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["connectionString"]);
con.Open();
string strsql = "select * from employees";
SqlDataAdapter da = new SqlDataAdapter(strsql, con);
da.Fill(ds);
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
con.Close();

Add a new button on the page. This will be used for inserting a new row on the grid. On the onClick event of the button, add these lines of code:

1 ds.Tables[0].Rows.Add();
2 DataGrid1.DataSource = ds;
3 DataGrid1.DataBind();
4 int index = DataGrid1.Items.Count - 1;
5 DataGrid1.EditItemIndex = index;
6 DataGrid1.DataBind();

Line 1 is for inserting a blank row at the end of the DataTable. And then binding the DataSet again on the DataGrid. Line 4 is for setting the last row on the DataGrid to Edit mode. Note that DataGrid1.Items.Count-1 is the number of records on the DataGrid minus one, since the index starts at 0, then bind the DataGrid again.

Now the problem is, the page posts back to the server when you click the Add button and the DataSet will again be reset. To avoid querying from the database again and filling the DataSet again, on the first bind of the DataGrid I assigned the DataSet to a session variable:

Session["ds"] = ds;

And then on the onClick event of the Add button, I reassigned the session variable back to the DataSet before inserting a blank row.

ds = (DataSet)Session[“ds”];

Now, when you click the Add button, the DataGrid will have a new row at the bottom on Edit mode. Notice that the buttons are labeled “Update” and “Cancel”. Your new record will not be saved when you click the Update button since it is designed only for Updating an existing record. We will have to modify the Update_Grid event of the DataGrid. We will include both the update method and the insert method in it since we are using the Edit template of the DataGrid for inserting a new record. And the Update button will trigger the Update_Grid event. We will only have to test if the event is for inserting or updating. To do that, we have to change the text property of the Update Button from “Update” to “Save” and then test the text property on Update_Grid event. The text property will serve as our insert/update tag.

Put these lines code on the the ItemDataBound event of the DataGrid:

1 if (e.Item.ItemType == ListItemType.EditItem)
2 {
3 if (btnAdd.Enabled == false)
4 {
5 Button btnSave = (Button)e.Item.FindControl("btnUpdate");
6 btnSave.Text = "Save";
7 }
8 }

Line 1 will test for the EditItem type. Line 3 will test if the binding comes from the Add button or from main binding of the DataGrid (new query from the database). However, you still have to insert the ff line of code:

On the onClick event of the Add button before binding the DataGrid:

btnAdd.Enabled = false;

This will prevent the user from clicking the Add button more than once and inserting multiple blank rows on the DataGrid. (The DataGrid supports only one EditItem at a time. If you try setting multiple EditItem at once, the last index to be set will be the EditItem.) This will also serve as a tag on setting the Update button text property. Don’t forget to set the Enabled property of Add button to true on the main binding of your DataGrid. (Remember, we have to bindings of the DataGrid, one querying from the Database, and the other on the onClick event of the Add button .)

Now, on the Update_Grid event, you have to test the text property of the Update button.

Button btn = (Button)e.Item.FindControl("btnUpdate");

(You have to manually set the ID of the Update button on the EditItemTemplate of the DataGrid in order to use FindControl.)

Test whether the text property is “Update” or “Save”.

if (btn.Text == "Update")

If the text property is set to “Update”, the execute the sql update statement. Else, the sql insert statement. Then bind the datagrid again (populate the DataSet again from the Database).

2/19/2008 2:00:29 PM fragilegirl19