Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Gridview mouseover effect 1

Status
Not open for further replies.

NuJoizey

MIS
Aug 16, 2006
450
US
Can somebody tell me what the problem is with this gridview? I don't know whether this is a JavaScript problem, an aspx problem, an event problem, or some combo of all three.

The desired effect is that there is a hi-lite of the row created when the user hovers over the rows of the gridView. When the user selects "LinkButton2" on the row, this causes a postback and turns the entire row yellow, incidcating the current row. that much of it works fine. Except that once the user has clicked one of the links and it has turned yellow as intended, the rollover effect over the other rows no longer works. IE returns "Error: Object Required"

aspx:

Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="linkButtonMessAround.aspx.vb" Inherits="TestPages_linkButtonFuckAround" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
  [COLOR=red]  <script type="text/javascript" language="javascript" >
    function changeRowColor(rowID)
    {
        //window.alert('test-changeRowColor');
        //window.alert(rowID)
        document.body.style.cursor = 'pointer'; 
        var oldColor = '';       
        var color = document.getElementById(rowID).style.backgroundColor;

        if(color != 'green')
        {
               
               document.getElementById(rowID).style.backgroundColor = 'green'; 
               oldColor='green';
        }
        else
        {
            
            document.getElementById(rowID).style.backgroundColor = oldColor; 
        }
    }
</script>[/color]
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
        </asp:Panel>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="dsTest">
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
                    ReadOnly="True" SortExpression="ProductID" />
                <asp:TemplateField HeaderText="ProductName">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("ProductName") %>' OnClick="turnYellow" ></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
                <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="dsTest" runat="server" ConnectionString="<%$ ConnectionStrings:NorthWindConnectionString %>"
            SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [CategoryName] FROM [Alphabetical list of products] ORDER BY [ProductName]">
        </asp:SqlDataSource>
    </div>       
    </form>
</body>
</html>

vb.net codebehind:

Code:
Partial Class TestPages_linkButtonMessAround
    Inherits System.Web.UI.Page


    Sub turnYellow(ByVal sender As Object, ByVal e As System.EventArgs)

        'this is called inline from a control on the aspx page like so:
        ' <asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("ProductName") %>' OnClick="turnYellow" ></asp:LinkButton>


        Dim gv As GridView = Me.GridView1
        Dim gvRowClicked As GridViewRow = sender.parent.parent
        Dim gvr As GridViewRow

        For Each gvr In gv.Rows
            If gvr.ClientID <> gvRowClicked.ClientID Then
                gvr.ControlStyle.BackColor = Nothing
            Else
                gvr.ControlStyle.BackColor = Drawing.Color.Yellow
            End If
        Next




    Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
        ' Response.Write("GridView1_RowCreated<br>")
      View_RowColor_OnMouseClick.aspx

        Dim strRowID As String


        If e.Row.RowType = DataControlRowType.DataRow Then
            strRowID = "row" & e.Row.RowIndex
            e.Row.Attributes.Add("id", "row" & e.Row.RowIndex)
            e.Row.Attributes.Add("onMouseOver", "changeRowColor('" & strRowID & "');")
            e.Row.Attributes.Add("onMouseOut", "changeRowColor('" & strRowID & "');")

        End If


    End Sub
 
this is better suited for forum855 as it directly effect asp.net.

instead of messing around with client ids just pass the object isself

Code:
function SelectRow(row)
{
   row.style.backgroundColor = 'green'; 
}

function UnselectRow(row)
{
   row.style.backgroundColor = 'white'; 
}
Code:
Dim row as GridViewRow = //get row;
If e.Row.RowType = DataControlRowType.DataRow Then
   row.Attributes.Add("onMouseOver", "SelectRow(this);")
   row.Attributes.Add("onMouseOut", "UnselectRow(this);")
End If
Code:
sender.parent.parent.ControlStyle.BackColor = Drawing.Color.Yellow
this is all off the top of my head,and my js is novice at best, but this should point you in the right direction

Jason Meckley
Programmer
Specialty Bakers, Inc.
 
i'm sorry my first comment was not meant for this post. too many tabs open.

Jason Meckley
Programmer
Specialty Bakers, Inc.
 
Jason,

once again you are dead on. I am grateful for the help. You deserve a whole box of ladyfingers.

I still don't understand why you have to pass the whole row to get the darn thing to work. To me it should work using ID's -- I mean I've seen tons of code examples using that method -- but the truth is that it just doesn't, and I guess that's just a good enough reason!

 
when you pass the id and call GetElementById(rowId) it returns the dom object with that id. If you already have a reference to the object just pass the object instead of the id.

asp.net client ids are evil at best. It makes sense why M$ auto generates them but it makes JS very difficult to work with.

You deserve a whole box of ladyfingers.
LOL!

Jason Meckley
Programmer
Specialty Bakers, Inc.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top