ASP.NET Using the DataList and Repeater, Datagrid Controls

Category: ASP.NET
Comments (2)

ASP.NET Using the DataList and Repeater, Datagrid Controls - Page 2

Page 2 of 2

When the Edit link button is clicked your DataGrid will look something like this:

As you see when you click the edit link the update and the cancel link button automatically appears.

Lets now see the code for the Cancel Event. Cancel event is used when you are in the edit mode and you change your mind about not to edit. So you click the cancel link button and the Datagrid returns back to its orginal condition.

private void Cancel_DataGrid(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
// All we do in the cancel method is to assign '-1' to the datagrid editItemIndex
// Once the edititemindex is set to '-1' the datagrid returns back to its original condition
myDataGrid.EditItemIndex = -1;
BindData();
}

Okay now we come to a slightly difficult step. We will carefully look at the Update method and see how it works.

private void Update_DataGrid(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
System.Web.UI.WebControls.TextBox cName = new System.Web.UI.WebControls.TextBox();
cName = (System.Web.UI.WebControls.TextBox) e.Item.Cells[1].Controls[0];
SqlCommand myCommand = new SqlCommand("SP_UpdatePerson",myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myCommand.Parameters.Add(new SqlParameter("@PersonName",SqlDbType.NVarChar,50));
myCommand.Parameters["@PersonName"].Value = cName.Text;
myConnection.Open();
myCommand.ExecuteNonQuery();
myConnection.Close();
myDataGrid.EditItemIndex = -1;
BindData();
}

Lets now dig into this method and see whats going on.

/p>

The name of the method as you can see is Update_DataGrid, this event is fired when you click the update link button which appears after clicking the edit button.
We declare a variable of TextBox type and call it cName. The reason of declaring a TextBox is that the value that we want is inside the TextBox which is inside the DataGrid control.
Later we made the SqlCommand object which takes stored procedure "SP_UpdatePerson", which will be discussed afterwords.
After marking the command object with the stored procedure we passed the parameter which is PersonName.
Finally we execute the Query and set the editItemIndex property of the DataGrid '-1' which will bring the datagrid back to its original form i.e without any textboxes.
Don't forget to bind the datagrid.

Update Stored Procedure

CREATE PROCEDURE SP_UpdatePerson
@PersonName nvarchar(50)
AS
UPDATE tblPerson SET PersonName = @PersonName WHERE PersonName = @PersonName;

Selecting Item from the Datagrid:

Another cool feature of the Datagrid control is that you can select any row from the datagrid and it will be displayed as the highligted row in the grid.

The highlight row event is called SelectedIndexChanged event. The event is called when the select column is clicked. The select column can be added to the datagrid using the property builder, just like we added "edit/cancel/update" link buttons.

// This event is fired when the Select is clicked
private void Select_DataGrid(object sender, System.EventArgs e)
{
// prints the value of the first cell in the DataGrid
Label2.Text += myDataGrid.SelectedItem.Cells[0].Text;
}

This method is pretty simple. When the datagrid select link button is pressed. We retrieve the item from the datagrid which is residing on the same row on which the link button is pressed. As we can see above in the code that we are retrieving the value from the first column of the datagrid.

I hope you all liked the article happy programming !

Download Sample Code