Highlight gridview row in update panel without posting back

Question

Hi

I have a gridview in an update panel with the following code to select a row, this in turn updates another updatepanel with details from the form record.

protected void gvMainGrid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //Make the entire row clickable to select this record
            //Uses javascript to post page back
            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
            e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(this.gvMainGrid, "Select$" + e.Row.RowIndex));   

        }
    }

I am manually binding the gridview from a database and don't want to rebind the grid just to highlight the row, but I can't seem to add any javascript to the onclick event, it seems to either show the GetPostBackClientHyperlink or the row highlight javascript.

Answer 1

Firstly, you can't apply text-decoration to a <tr>... or a <td> for that matter. You need to apply it to the elements inside.

Here are a couple adjustments you can try-

e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';";



e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(this.gvMainGrid.ClientId, "Select$" + e.Row.RowIndex)); 

The 1st works for me in code. Didn't have anything handy to test the 2nd.

Answer 2

How to highlight gridview when row is selected

for this you have to write this code in your code behind file in OnRowCreated event or your can also write this code in OnRowDataBound event of grid...

    protected void ctlGridView_OnRowCreated(object sender, GridViewRowEventArgs e)
    {    
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + e.Row.RowIndex.ToString() + "')");
        }            
    }

and add this one script

<script language="javascript" type="text/javascript">
    var gridViewCtlId = '<%=ctlGridView.ClientID%>';
    var gridViewCtl = null;
    var curSelRow = null;
    function getGridViewControl()
    {
        if (null == gridViewCtl)
        {
            gridViewCtl = document.getElementById(gridViewCtlId);
        }
    }

    function onGridViewRowSelected(rowIdx)
    {
        var selRow = getSelectedRow(rowIdx);
        if (curSelRow != null)
        {
            curSelRow.style.backgroundColor = '#ffffff';
        }

        if (null != selRow)
        {
            curSelRow = selRow;
            curSelRow.style.backgroundColor = '#ababab';
        }
    }

    function getSelectedRow(rowIdx)
    {
        getGridViewControl();
        if (null != gridViewCtl)
        {
            return gridViewCtl.rows[rowIdx];
        }
        return null;
    }
</script>

and it will highlight the selected row..

Answer 3

I was struggling to add both on click events to the row databound:

e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(this.gvMainGrid, "Select$" + e.Row.RowIndex));   

e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + e.Row.RowIndex.ToString() + "')");

Appending the PostBack select after the row highlight method with ';' seems to have worked.

e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + e.Row.RowIndex.ToString() + "');" + ClientScript.GetPostBackClientHyperlink(this.gvMainGrid, "Select$" + e.Row.RowIndex));