The APS.Net DataGrid

Sample at: ../Datagrid/AspDataGrid.aspx

Simple Sample

E.Item.DataItem Sample…

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

Dim o As Label

o = e.Item.FindControl("lblExam")

o.Text = e.Item.DataItem("Exam")

End If

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

Dim o As Label

o = e.Item.Cells(3).FindControl("lblLink")

o.Text = "<a id='MyId' href=""javascript:PopIt('Some Text To Show...<br><br>Hello World!');""'style='background-color:LightBlue; border-color:CornflowerBlue; border-width:2px; border-style:Solid; height:18px; padding:3px; text-align:center'>Click Here</a>"

End If

End Sub

How to format a date field in a cell of a DataGrid…

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then

Dim d As Date

Try

d = e.Item.Cells(4).Text

e.Item.Cells(4).Text = d.ToShortDateString

Catch

'Do Nothing If there is not date in the database field

End Try

End If

End Sub

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

'Here's how to reference a TextBox found in an Item Template....

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

CType(e.Item.FindControl("TextBox1"), TextBox).Text = "Hello Worldie!"

End If

End Sub

Private Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.ItemCommand

'Here's how to respond to a ButtonColumn Click Event....

If e.CommandName.ToUpper = "CMDMYBUTTON" Then

Response.Write(CType(e.Item.FindControl("TextBox1"), TextBox).Text)

End If

End Sub

The DataGrid Video

Above, In It’s simplest form, Select the column type, (Bound Column), the Data Field,(fldName, Found in the dataset).

Just adding the code below to the DataGrid’s EditCommand Event causes the grid to look like

TextBoxes now in the cells and the Update, Cancel and Delete Buttons Appear....

Private Sub DataGrid1_EditCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.EditCommand

DataGrid1.SelectedIndex = e.Item.ItemIndex

DataGrid1.EditItemIndex = e.Item.ItemIndex

Call BindTheDataNow()

End Sub

Responding to a Delete Command...

Private Sub DataGrid1_DeleteCommand(ByVal source As Object, ByVal e As

System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.DeleteCommand

DataGrid1.SelectedIndex = e.Item.ItemIndex

Response.Write("Delete This Item? " & e.Item.Cells(0).Text())

End Sub

Canceling the edited data is as easy as placing this code in the DataGrid’s CancelCommand event…

Private Sub DataGrid1_CancelCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.CancelCommand

DataGrid1.EditItemIndex = -1

Call BindTheDataNow()

End Sub

Reference a cell not in edit mode:

e.Item.Cells(0).Text

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

CType(e.Item.FindControl("TextBox1"), TextBox).Text = Val(e.Item.Cells(1).Text) * 10

End If

End Sub

Filter Data In A DataGrid…

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

'******************* OPEN A DATABASE ****************************************************

Dim objConn As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;DATA SOURCE=" & "C:\JDRIVE\can\isc2\cp.mdb")

Dim objCommand As New OleDbCommand()

Dim objDa As New OleDbDataAdapter()

Dim objDs As New DataSet()

Dim objCommandBuilder As New OleDbCommandBuilder()

Dim strSQL As String = "Select Lname From candidate Where lname like 'z%'"

objCommand.CommandText = strSQL

objCommand.Connection = objConn

objDa.SelectCommand = objCommand

objDa.Fill(objDs, "CanDem")

objConn.Close()

'Show All The Data In the DataSet....

DataGrid1.DataSource = objDs.Tables("CanDem")

MessageBox.Show("Now We'll Filter The Data")

'Now Filter The Data Shown In The Grid...

objDs.Tables("CanDem").DefaultView.RowFilter = "Lname like 'ze%'"

DataGrid1.DataSource = objDs.Tables("CanDem")

End Sub

Reference a cell in edit mode:

strName = CType(e.Item.Cells(0).Controls(0), TextBox).Text

Format a Date in a DataGrid’s bound column, (Done in HTML) ….
asp:BoundColumn DataField="InvoiceDate" ReadOnly="True" HeaderText="Invoice Date" DataFormatString="{0:d}"></asp:BoundColumn

Set Column Width At Runtime…

Private Sub DataGrid1_ItemCreated(xxx) Handles DataGrid1.ItemCreated

e.Item.Cells(1).Width = New Unit(10)

End Sub

The user clicks on a Template Button and we find info in another column of the same row in a text box named txtTI.

If e.CommandName = "MyTemplateButton" Then

DataGrid1.SelectedIndex = e.Item.ItemIndex

Response.Write(CType(DataGrid1.SelectedItem.FindControl("txtTI"), TextBox).Text)

End If

This sample shows how to do alternating colors in datagrid and also how to add a confirmation delete button to a datagrid row.

Private Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound

'Add a javascript onclick event at runtime....

Dim B As Button

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

B = CType(e.Item.FindControl("cmdDelete"), Button)

B.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this record?');")

End If

OR (The code below works for a Delete Button not in a template, but from the standard Edit Delete Cancel option….

Dim B As Button

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

B = e.Item.Cells(6).Controls(0)

B.Attributes.Add("onclick", "return confirm('Are you sure you want to delete this record?');")

End If

If e.Item.ItemType = ListItemType.AlternatingItem Then

CType(e.Item.FindControl("txtCheckAmount"), TextBox).BackColor = System.Drawing.Color.Salmon

CType(e.Item.FindControl("txtCheckDate"), TextBox).BackColor = System.Drawing.Color.Salmon

CType(e.Item.FindControl("txtService"), TextBox).BackColor = System.Drawing.Color.Salmon

End If

End Sub

This is how to modify a template cell at runtime…
Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound

      If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            CType(e.Item.FindControl("TextBox1"), TextBox).Text = Val(e.Item.Cells(1).Text) * 10
      End If

End Sub

Use The DataView to filter records…

Dim dv As DataView

dv = New DataView(objDataSet.Tables("Proctors"))

dv.RowFilter = "Lname = 'Schimsky' and fname = 'Steve'"

DataList1.DataSource = dv

DataList1.DataBind()

To sort a column:

First enter a Sort Expression for a column as shown above. Then in the DataGrid’s SortCommand event place this code…

Private Sub DataGrid1_SortCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) Handles DataGrid1.SortCommand

Response.Write(e.SortExpression) ‘The SortExpression will let us now which field in the grid was clicked

CreateTableBindData() ‘then all we need to do is sort the data and re-bind.

End Sub

How to make a datagrid Scroll