Escolar Documentos
Profissional Documentos
Cultura Documentos
Introduction:
Microsoft.net framework ships with many usefull controls. These controls makes the life
of developer easy by providing them with the functinality they want.
Among those many controls is the DataGrid control which helps the developer to display the data
on the screen in the format of an arranged table. Datagrid is one of the 3 templated controls
provided by the Microsoft.net framework. The other two are DataList and the Repeator control.
Many new controls are being developed everyday but their basic idea is inherited from the classic
DataGrid control.
In this article we will see the most common use of the datagrid control. Lets set up out datagrid.
1. Drag and Drop the datagrid control from your toolbox to the webform.
2. The datagrid will appear as a simple table.
3. You can make the datagrid pretty by selecting the Auto format features.
Note: Please also note that the button type should be link button or else it wont work.
Storing the database connection:
In this demo I am storing the database connection in the Web.config file. The database name is
DBSnippets, which has one table known as tblPerson. Here is the web.config file.
<configuration>
<appSettings>
<add Key="ConnectionString" value="server=localhost;database=DBSnippets">
</appSettings>
</configuration>
Okay till now we have made the Datagrid and also saved the connection string in the web.config
file. Now the time has come to code and handle the events.
Lets first make the BindData method which will retrieve the contents from the database and bind
it on the screen. This will be one of the most important methods since it will be called whenever
the page is loaded for the first time.
As you see the BindData method is called when the page is not posted back. Now lets see the
BindData method in details.
Stored Procedure:
As you can see that the above Stored Procedure is pretty simple. All we are doing is we are just
selected all the columns from the table person.
Lets now make the Edit method which will display textboxes inside the datagrid so that a user can
insert data. This sort of editing is also known as Inline editing.
Making datagrid editable is pretty simple. All you to do is to code few lines in the EditCommand
event of the datagrid. You can view all the events supported by DataGrid by selecting properties
and than selecting the Thunder/Flash yellow sign at the top of the properties window.
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.
Okay now we come to a slightly difficult step. We will carefully look at the Update method and see
how it works.
Lets now dig into this method and see whats going on.
• 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:
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 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.