Click here to Skip to main content
14,299,664 members

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

Rate this:
2.27 (4 votes)
Please Sign up or sign in to vote.
2.27 (4 votes)
26 Apr 2007
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.

License

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

Share

About the Author

.NetRams
Web Developer
India India
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
Article
Posted 26 Apr 2007

Stats

25.9K views
310 downloads
12 bookmarked