• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2198
  • Last Modified:

Gridview row mouseover or mouse click

I am having a gridview in asp.net and i am using vb.net. I want row color to be changed if the use clicks on row of gridview or when user moves mouse on row.Please suggest the code
0
norton127
Asked:
norton127
  • 6
  • 3
1 Solution
 
isaackhaziCommented:
Add an OnRowCreated event to your GridView. This will run for each row created in your Gridview and allow you to add the necessary JavaScript.

<asp:GridView ID="gvNews"
        runat="server"
        AutoGenerateColumns="False"
        DataKeyNames="BlogID"
        DataSourceID="SqlDataSource1"
        AllowPaging="True"
        PageSize="20"
        BorderStyle="None"
        BorderWidth="0px"
        Width="100%"
        CellPadding="10"
        CellSpacing="4"
        ShowHeader="False"
        OnRowCreated="gvNews_OnRowCreated"
        >
</asp:GridView>

In your code behind, you will need to add a handler for this event. For my example, Im using alternating background colors on rows (which you should do too, it makes things so much more readable). This causes me to add a couple extra lines so that I make sure Im setting my rows back to the correct color on MouseOut

  protected void gvNews_OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowState == DataControlRowState.Alternate)
            {
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#f7fff8';");
            }
            else
            {
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#FFFFE1';");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#eefef0';");
            }
        }
    }

Open in new window

0
 
isaackhaziCommented:
THe above is for chnage on rollover

THe below is for change on click
<script type="text/javascript">
        //variable that will store the id of the last clicked row
        var previousRow;
        
        function ChangeRowColor(row)
        {
            //If last clicked row and the current clicked row are same
            if (previousRow == row)
                return;//do nothing
            //If there is row clicked earlier
            else if (previousRow != null)
                //change the color of the previous row back to white
                document.getElementById(previousRow).style.backgroundColor = "#ffffff";
            
            //change the color of the current row to light yellow
 
            document.getElementById(row).style.backgroundColor = "#ffffda";            
            //assign the current row id to the previous row id 
            //for next row to be clicked
            previousRow = row;
        }
     </script>
Following code will be required on GridView1_RowDataBound event
 
 Collapse
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles GridView1.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            e.Row.Attributes.Add("onclick", "javascript:ChangeRowColor('" & e.Row.ClientID & "')")
        End If
    End Sub
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            'FillDataTable is a function that will return a DataTable
            'with some values and is available in the code for download.
            Me.GridView1.DataSource = Me.FillDataTable()
            Me.GridView1.DataBind()
        End If
    End Sub
        

Open in new window

0
 
isaackhaziCommented:
50 points for this??... :(
0
Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

 
norton127Author Commented:
hi thank you Please send me the vb code i am eager to know about that
Please
0
 
norton127Author Commented:
I am unable to change C# code to VB it is difficult what is this stands for here how to change that or else please suggest me the mouse over in vb.
0
 
isaackhaziCommented:

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
{
 
string onmouseoverStyle = "this.style.backgroundColor='blue'";
 
string onmouseoutStyle = "this.style.backgroundColor='#@BackColor'";
 
string rowBackColor = String.Empty;
 
if (e.Row.RowType == DataControlRowType.DataRow)
 
{
 
if (e.Row.RowState == DataControlRowState.Alternate)
 
rowBackColor = MyGridView.AlternatingRowStyle.BackColor.Name.Remove(0, 2);
 
else rowBackColor = MyGridView.RowStyle.BackColor.Name.Remove(0, 2);
 
e.Row.Attributes.Add("onmouseover", onmouseoverStyle);
 
e.Row.Attributes.Add("onmouseout", onmouseoutStyle.Replace("@BackColor",rowBackColor));
 
}
 
}

Open in new window

0
 
isaackhaziCommented:
just begin typing the above code in VS and it will prompt you with the right syntax. There is not much ifference between the VB and C# versions
0
 
norton127Author Commented:
Thank you My friend.I Got the answer i am just giving backgroundcolor not backgroundColor.Due to C the grid is not displayed.IS this case sensitive ? Is it a javascript? Any how Thankyou for your Response and Can i get the code for getting popup menu by right click  or clicking the gridview row? Plese help me in this regard also
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now