CODEWITHSUNDEEP
c#.netasp.netgridview
PMC
PMC

Reputation: 4766

Highlight gridview row in update panel without posting back

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.

Upvotes: 3

Views: 10526

Answers (3)

Azhar
Azhar

Reputation: 20670

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

Upvotes: 3

PMC
PMC

Reputation: 4766

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

Upvotes: 2

TheGeekYouNeed
TheGeekYouNeed

Reputation: 7539

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.

Upvotes: 1

Related Questions