DataGrid and Client Side Events

A DataGrid Controls can be used with BoundColumns, TemplateColumns, HyperlinkColumns and this huge list is unending....

In our sample we'll work with DataGrid and the Client-Side Events.

In the sample we will learn:

1. Event onMouseOver - change the color of the row in the Datagrid
2. Event onMouseOver - change the color of the column cell in the Datagrid
3. Event onClick - retrieve the value of the row of the user.
4. To display the information of a selected row on the other page?

Note(For Point 4) : We'll show the Data in the Datagrid in the below given format

ProductId	1
ProductName	Chai
UnitPrice	18
...	...

Let's begin with coding:

Step 1:

In webform1.aspx drag drop a Datagrid.

<asp:datagrid id="DataGrid1" runat="server" Font-Size="X-Small"
Font-Names="Verdana" DataKeyField="ProductId"></asp:datagrid>

Simple binding of the data to datagrid as given below

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
BindData()
End Sub
Sub BindData()
Dim myconnection As SqlConnection
Dim myda As SqlDataAdapter
Dim ds As DataSet
Dim strConn As String
strConn = "Server=localhost;uid=sa;password=;database=northwind;"
myconnection = New SqlConnection(strConn)
myda = New SqlDataAdapter("Select ProductID , ProductName, UnitPrice from Products" _& " where productid<=25", myconnection)
ds = New DataSet
myda.Fill(ds, "AllTables")
Dim dv As DataView = New DataView(ds.Tables(0))
DataGrid1.DataSource = dv
DataGrid1.DataBind()
End Sub

Step 2:

Lets deal with the first task i.e. display the Data with the hover effects as below


 
To achieve the given points above we'll have to invoke ItemDataBound Event. [Msdn Note: ItemDataBound Event provides you with the last opportunity to access the data item before it is displayed on the client]. For more Details ItemDataBound

Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, _ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
Dim dv As DataView = DataGrid1.DataSource
Dim dcCol As DataColumn
Dim dc As DataColumnCollection = dv.Table.Columns
Dim strID As String
For Each dcCol In dv.Table.Columns
If e.Item.ItemType = ListItemType.AlternatingItem Or _e.Item.ItemType = ListItemType.Item Then
strID = DataGrid1.DataKeys(e.Item.ItemIndex)
'1. To change the color of the row onMouseOver in the Datagrid
e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='#99ccff'")e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff'")
'2. To change the color of the column onMouseOver (i.e. the cell) in the Datagrid
e.Item.Cells(dc.IndexOf(dc(dcCol.ColumnName))).Attributes.Add("onmouseover", _"this.style.backgroundColor='RoyalBlue';this.style.cursor='hand';" _& "window.status='ProductID=" & strID & "'")
e.Item.Cells(dc.IndexOf(dc(dcCol.ColumnName))).Attributes.Add("onmouseout", _"this.style.backgroundColor='';this.style.cursor='default';" _& "window.status=''")
'3. To retrieve the value of the row onClick of the user.
'4. To display the information of a selected row on the other page?
e.Item.Cells(dc.IndexOf(dc(dcCol.ColumnName))).Attributes.Add("onclick", _"javascript:window.open('dganyrowclick1.aspx?id=" & strID & "'," _& "'MyPage','height=300,width=300')")
End If
Next
End Sub

After the code is put in place lets move to the other page i.e. new window opened to display the data.

Step 3:

We'll show the data in the DataGrid as below. In the Figure below the ColumnName's are shown in single column different rows and same goes true for the Values.

  
Let's try to code for this

Simple drag-drop of datagrid

<TABLE id="Table1" width="100%" border="0">
<TR>
<TD>
<asp:Label id="Label1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small">Product Details</asp:Label>
</TD>
</TR>
<TR>
<TD>
<asp:DataGrid id="DataGrid1" runat="server" Font-Names="Verdana" Font-Size="X-Small"></asp:DataGrid>
</TD>
</TR>
</TABLE>

As far as coding

Create a function taking Dataset as a Parameter and returning a DataSet

• Create a new Dataset with two columns (One to display the ColumnName and the other to display the value)
• Assign the ColumnName and value to the string Array.
• Add the array as Row to the dataset

Function reShapeDataSet(ByVal oldDs As DataSet) As DataSet
Dim newds As New DataSet
newds.Tables.Add()
newds.Tables(0).Columns.Add("ColumnName")
newds.Tables(0).Columns.Add("Value")
Dim dc As DataColumn
Dim dr As DataRow
For Each dc In oldDs.Tables(0).Columns
For Each dr In oldDs.Tables(0).Rows
Dim arr As String() = {dc.ColumnName, dr(dc.ColumnName).ToString}
newds.Tables(0).Rows.Add(arr)
Next
Next
Return newds
End Function

As far as Page_Load just give a bind DataSource Property of DataGrid to above function and call the DataBind Method.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Dim myconnection As SqlConnection
Dim myda As SqlDataAdapter
Dim ds As DataSet
Dim strConn As String
strConn = "Server=localhost;uid=sa;password=;database=northwind;"
myconnection = New SqlConnection(strConn)
myda = New SqlDataAdapter("Select * from Products where Productid=" & _Request.QueryString("id"), myconnection)
ds = New DataSet
myda.Fill(ds, "AllTables")
DataGrid1.DataSource = reShapeDataSet(ds)
DataGrid1.DataBind()
End Sub