Highlight gridview row in update panel without posting back

Question

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.

prote         


        

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));