Click here to Skip to main content
14,877,421 members
Articles / Web Development / ASP.NET
Posted 26 Apr 2007


12 bookmarked

On click any of the column in datagrid to make that fullrow selected

Rate me:
Please Sign up or sign in to vote.
2.27/5 (4 votes)
26 Apr 20071 min read
ASP.Net datagrid onclick change selected row back color.


When there is need for full row selection in Datagrid, it will not provide direct option to make full row selection as like listview control in early versions of visual studio. I tried with small trick over filling data grid values using asp:TemplateColumn instead of asp:BoundColumn.


Sample connects with Northwind table in SQL server.

Using the code

Create Datagrid with number of columns to be displayed. Assign columns used to show in datagrid using asp:BoundColumn and make these columns visiblity false. Create asp:TemplateColumn as much as asp:BoundColumn with new column for radio button.

To create SQLconnection string with Northwind table, create dataset and assign the same to datagrid as:

// Any source code blocks look like this
Dim dbCon As New OleDbConnection
dbCon.ConnectionString = "Provider=SQLOLEDB;server=.;uid=sa;pwd=;database=northwind"
Dim ds As New DataSet
Dim ad As OleDbDataAdapter
ad = New OleDbDataAdapter("select employeeid, title, titleofcourtesy + lastname + ' ' + firstname as fullname, birthdate from employees", dbCon)
ad.Fill(ds, "employees")

DG_EmployeeList.DataSource = ds

In datagrid ItemDataBound event copy the code below,

If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
    'To get the Employee id
    Dim nEmployeeId As Integer
    nEmployeeId = e.Item.Cells(1).Text

    'Set onclick event for
    Dim sSerialNumber As HtmlControls.HtmlGenericControl
    sSerialNumber = e.Item.FindControl("lblSNo")
    sSerialNumber.Attributes.Add("onclick", "javascript:onCheckedChangedRadioButton(" & nEmployeeId & ");")

    'Set full name
    Dim sFullName As HtmlControls.HtmlGenericControl
    sFullName = e.Item.FindControl("lblEmployeeName")
    sFullName.InnerHtml = e.Item.Cells(2).Text
    sFullName.Attributes.Add("onclick", "javascript:onCheckedChangedRadioButton(" & nEmployeeId & ");")

    'Set Designation
    Dim sDesignation As HtmlControls.HtmlGenericControl
    sDesignation = e.Item.FindControl("lblDesignation")
    sDesignation.InnerHtml = e.Item.Cells(3).Text
    sDesignation.Attributes.Add("onclick", "javascript:onCheckedChangedRadioButton(" & nEmployeeId & ");")

    'Set last modified date label value
    Dim sDOB As HtmlControls.HtmlGenericControl
    sDOB = e.Item.FindControl("lblDOB")
    sDOB.InnerHtml = e.Item.Cells(4).Text
    sDOB.Attributes.Add("onclick", "javascript:onCheckedChangedRadioButton(" & nEmployeeId & ");")

    'Set for radio button item
    Dim sRadioBtn As HtmlControls.HtmlInputRadioButton
    sRadioBtn = e.Item.FindControl("chkEmployee")
    sRadioBtn.Value = nEmployeeId
    sRadioBtn.Name = "chkEmployee"
End If

as in design mode we have the original values assigned with databound column. Here is the trick, we have copied all the field value to lable in Item template column and add client side onclick attributes to it.

Datagrid internally created rows and columns as table structure in design. On click any label we need to check which row it was using the javascript code as follows,

//Javascript code to choose the selecte row in datagrid
function NavigatingDataGrid(oDataGrid, SelNodeValue, selClassName) 
    oDataGrid = document.getElementById (oDataGrid);
    for(j = 0; j < oDataGrid.childNodes.length; j++) 
        var tBody = oDataGrid.childNodes(j); 
        for(k=0;k < tBody.childNodes.length-1; k++) 
            var tr = tBody.childNodes(k); 
            for(l=0; l < tr.childNodes.length-1; l++) 
                td = tr.childNodes(l);
                for(m=0; m < td.childNodes.length; m++)
                    if ((td.childNodes[m].nodeName == "INPUT") && (td.childNodes[m].type == "radio"))
                        if (td.childNodes[m].value == SelNodeValue)
                            tr.className = selClassName;

refer sample code for more detail.

Points of Interest

Datagrid can be customized in many ways. I am working on more to come with different options.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
India India
No Biography provided

Comments and Discussions

-- There are no messages in this forum --