Tuesday, February 20, 2007

GridViews with DataTables - Part I

One of the most common questions, i come across on forums while using Gridviews with datatables,how do i do an edit, update delete if there is no SqlDataSource, or ObjectDataSource (Basically you have nothing to do with the DataBase) but instead you have specified your datasource to be a DataTable to bind the Grid. All the values in the Grid are built from a datatable. I had to do something exactly like this and with help on forums and some googling, I acheived this. Thought to share my 2 cents so that you can use it when you want a DataTable and have no database operations.

Firstly, Once you put a Gridview on the page, set the AutoGenerateColumns = true, and AutoGenerateEditButton = true and AutoGenerateDeleteButtons = true.

Now, in the code behind declare a new DataTable and new DataColumn for the DataTable. On the Page load event include this code.

public partial class Default: System.Web.UI.Page
{

//Declare a new DataTable and allocate memory
DataTable myDatatable = new DataTable();
// Declare a new DataColumn and allocate memory
DataColumn myDataColumn = new DataColumn();
//Add extraColumns if u need to in the DataTable and allocate memory
DataColumn myDataColumn2 = new DataColumn();
//Declare a new DataRow.
DataRow myDataRow;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Define the DataColumn's DataType.
myDataColumn.DataType = System.Type.GetType("System.Int32");
//Declare the Name of the column
myDataColumn.ColumnName = "Quantity";
// myDataColumn.ReadOnly = true; //Use this if you want the column to be //readonly, probably you wont need it.
//Add the column to the DataTable myDataTable
myDatatable.Columns.Add(myDataColumn);
//Add the DataTable into a Session variable for later usage.
Session["tables"] = myDatatable;
}
}
}

Ok, the above code will create a new Datatable with the column definitions and properties. now imagine you have a textbox and a submit button. Values entered in the textbox must get bound to grid, each time you click the button a new row has to be generated. To accomplish this follow the code below:

protected void BtnSubmit_Click(object sender, EventArgs e)
{

if (Session["tables"] != null)
{
//Retrieving the values from the session and assigning to our DataTable
myDatatable = (DataTable)Session["tables"];
//Create a new Row in the DataTable using the NewRow() method.
myDataRow = myDatatable.NewRow();

//The i'th Row's i'th column is assigned a value. In this case, we have only one column and each row is created on each button //click. so, i have specified the ColumnName and assigned the value from the TextBox.

myDataRow["Quantity"] = Convert.ToInt32(txKitQty.Text);
//Add the row to the DataTable
myDatatable.Rows.Add(myDataRow);
//Update the session with the new DataTable information
Session["tables"] = myDatatable;
// You can set the source to be the myDataTable or the Session variable, both are //same here
GridView1.DataSource = Session["tables"];
GridView1.DataBind();
}
}

So, now our Grid gets bigger and bigger on each button click with a value from the textbox. Since we already set the AutoGenerateEdit and Delete Buttons in the grid to be true, we can now see a Edit and Delete Hyperlinks on each row.

How do we do edit a row entered in the Grid . How do we update?Cancel?Delete a row?..and bind it back to the DataTable?

To be Contd.... Till then try this out and Happy coding.!

No comments: