C# GridView Implementing clickable cells from dynamically created DataTable

Question

I've been trying to work on this for awhile now, and I'm at my wits end. I have a web form with a GridView control. The data source is a dynamically created DataTable, and I would like to do this without Template Fields if at all possible. My goal is to have 4 checkbox columns that the user can click to change the values. I just made the 4 columns data type bool so that they automatically show up as checkboxes. I know how to select a row with a little help from javascript, but being able to detect which column was clicked has thus eluded me.

Relevant code showing how I am currently selecting the row:

function getSelectedRow(row) 
{
    jQuery(row).children(":first").children(":first")[0].click();
}

Code Behind:

protected void gvReviewOrder_OnRowDataBound(object sender,  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string onClick = "javascript: getSelectedRow(this);";
        e.Row.Attributes["onclick"] = onClick;
        e.Row.Style["cursor"] = "pointer";
    }
}

The latest thing I have tried was using JQuery from the following thread: Table row and column number in jQuery

Instead of using an alert, I was trying to update the clicked column index into a hidden field, so this is what my current Javascript function looks like:

$("td").click(function () 
{
    var colIndex = $(this).parent().children().index($(this));
    $("#hfColumnId").val(colIndex);
});

So hypothetically my hidden field "hfColumnId" should be updated when the cell is clicked, but that is not happening. Do I need to add code on my OnRowDataBound Event to add the click event first?

As you can probably guess, I'm still learning when it comes to web forms, and I'm just over my head right now. Any help would be much appreciated.

So to make a long question short, is there any way to return the column index when a cell is clicked via jquery from a GridView control?

Thanks in advance!

edit I found this thread from last year with a solution, but they suggest setting EnableEventValidation to false, and I know this is not recommended. So if I could figure out how to implement that way without setting that to false it could be a potential solution maybe?

Get clicked cell index in gridview (not datagridview) asp.net

Answer 1

Possible solution is described in : http://www.codeproject.com/Tips/209416/Click-select-row-in-ASP-NET-GridView-or-HTML-Table :

Listing 1. Adding onClick attribute to the Table dynamically rendered by ASP.NET GridView

protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
    if (e.Row.RowType == DataControlRowType.DataRow){
        // javascript function to call on row-click event
        e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
    }
}

and corresponding sample Javascript Function to perform some custom formatting of the dynamically rendered Table Row on click event (essentially implementing a Click event handler):

Listing 2. Javascript function to format Table Row onClick

<script type="text/javascript">
// format current row
function SelectRow(row) {
 var _selectColor = "#303030";
 var _normalColor = "#909090";
 var _selectFontSize = "3em";
 var _normalFontSize = "2em";
 // get all data rows - siblings to current
 var _rows = row.parentNode.childNodes;
 // deselect all data rows
 try {
     for (i = 0; i < _rows.length; i++) {
         var _firstCell = _rows[i].getElementsByTagName("td")[0];
         _firstCell.style.color = _normalColor;
         _firstCell.style.fontSize = _normalFontSize;
         _firstCell.style.fontWeight = "normal";
     }
 }
 catch (e) { }
 // select current row (formatting applied to first cell)
 var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
 _selectedRowFirstCell.style.color = _selectColor;
 _selectedRowFirstCell.style.fontSize = _selectFontSize;
 _selectedRowFirstCell.style.fontWeight = "bold";
}
</script>

Alternatively, instead of adding onClick attribute to each row of the table as per Listing 1, it's possible to implement this functionality with Javascript code snippet shown below:

Listing 3. Javascript Table Row onClick event handler

// ** table row click event **
function row_OnClick(tblId) {
    try {
        var rows = document.getElementById(tblId).rows;
        for (i = 0; i < rows.length; i++) {
            var _row = rows[i];
            _row.onclick = null;
            _row.onclick = function () {
                return function () {selectRow(this);};
            }(_row);
        }
    }
    catch (err) { }
}

Practical implementation of the solution shown above (Listing 3) with complete Javascript code base can be found here: http://busny.net.

Client-side Javascript (or jQuery) scripting provides high responsiveness. This core solution could be further extended pertinent to the particular requirements. For example, individual CheckBoxes within the row object var can be addressed by using the following syntax:

row.cells[0].firstChild.checked

and so on.

Hope this may help.