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

.NetRams

2.27/5 (4 votes)

Apr 27, 2007

1 min read

27910

314

ASP.Net datagrid onclick change selected row back color.

Introduction

When there is need for full row selection in ASP.net 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.

Background

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"
dbCon.Open()
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
DG_EmployeeList.DataBind()

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 s.no
    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.