MouseOver Sample Code Needed

Answered (Verified) This post has 3 verified answers | 8 Replies | 4 Followers Thread's RSS feed.

Scott
Points 633
Replied On: Wed, Mar 30 2011 4:10 PM Reply

Are there any good sample snippets of how to use the MouseOver client-side event of the WebDataGrid?

 

My problem is I am trying to gain access to the row being hovered over and do some action based on that. how do I gain access to the row being hovered over?

On another note, what tool can i use to see the sender and eventArgs properties/methods available. You never realize how much you need intellisense until it's not there!?

Sample code for other Mouse events would help too... Thanks.

  • Post Points: 20

Verified Answer

Answered (Verified) Replied On: Thu, Mar 31 2011 4:13 AM Reply
Verified by Scott

Hi Scott,

You can have a look at the documentation about WebDataGrid client side events here.

Or just look at this sample.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 

<%@ Register tagprefix="ig" namespace="Infragistics.Web.UI.GridControls" Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" %> 

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

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>   

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

 

        <script type="text/javascript">

            function myFunc(sender, args)

            {

                if(args.get_type() == "row")

                {

                    var index = args.get_item().get_index();

                    alert("You hovered over row " + index);

                }

            }

        </script>

       

        <ig:WebDataGrid ID="iggv" runat="server" AutoGenerateColumns="true" Width="400px" Height="400px">

            <ClientEvents MouseOver="myFunc" />

        </ig:WebDataGrid>   

    </form>

</body>

</html>

Hope this helps

 

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 55
Answered (Verified) Replied On: Thu, Mar 31 2011 9:12 AM Reply
Verified by Scott

Hi Scott,

You should look at the documentation to find out what properties/methods are available.

 Of course as much as we try to document everything there are some things that you can only find by debugging the code.

This can be easily done either with Visual Studio which has good javascript debugger or with the developer tools that are present in almost every browser.

To try out the visual studio debugger write "debugger;" in the javascript code and run the application in debug mode and it should break at that statement. All the visual studio debugging features like "Quick Watch" will be available and you can explore the objects that way.

Check this blog post for more information.

About your last question.

The "get_element()" method returns the actual html dom element so you should use its "style" property.

function WebDataGrid1_Grid_MouseOver(sender, eventArgs)
{
  if (eventArgs.get_type() == "row") {
    eventArgs.get_type().get_element().style.fontWeight = "bold";
  }
}

Hope this helps

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 70
Answered (Verified) Replied On: Thu, Mar 31 2011 10:23 AM Reply
Verified by Scott

Hi Scott,

Sorry for the MouseOut issue.

Looks like the cells background is covering the row background so you need to set the desired background-color to every cell.

Have a look at this code.

 

function setRowCellsBackgroundColor(row, backgroundColor) {

                var cellCount = row.get_cellCount();

                for(var i = 0; i < cellCount; i++) {

                    row.get_cell(i).get_element().style.backgroundColor = backgroundColor;

                }

            }

 

            function WebDataGrid1_Grid_MouseOver(sender, eventArgs) {

                if (eventArgs.get_type() == "cell") {

                    eventArgs.get_item().get_row().get_element().style.fontWeight = "bold";

                    setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "Yellow");

                    eventArgs.get_item().get_row().get_element().style.color = "Red";

                }

                else if (eventArgs.get_type() == "row") {

                    eventArgs.get_item().get_element().style.fontWeight = "bold";

                    setRowCellsBackgroundColor(eventArgs.get_item(), "Yellow");

                    eventArgs.get_item().get_element().style.color = "Red";

                }

            }

 

            function WebDataGrid1_Grid_MouseOut(sender, eventArgs) {

                if (eventArgs.get_type() == "cell") {

                    eventArgs.get_item().get_row().get_element().style.fontWeight = "normal";

                    setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "");

                    eventArgs.get_item().get_row().get_element().style.color = "";

                }

            }

 

Thanks

 

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 25

All Replies

Answered (Verified) Replied On: Thu, Mar 31 2011 4:13 AM Reply
Verified by Scott

Hi Scott,

You can have a look at the documentation about WebDataGrid client side events here.

Or just look at this sample.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> 

<%@ Register tagprefix="ig" namespace="Infragistics.Web.UI.GridControls" Assembly="Infragistics4.Web.v10.3, Version=10.3.20103.1, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" %> 

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

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>   

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

 

        <script type="text/javascript">

            function myFunc(sender, args)

            {

                if(args.get_type() == "row")

                {

                    var index = args.get_item().get_index();

                    alert("You hovered over row " + index);

                }

            }

        </script>

       

        <ig:WebDataGrid ID="iggv" runat="server" AutoGenerateColumns="true" Width="400px" Height="400px">

            <ClientEvents MouseOver="myFunc" />

        </ig:WebDataGrid>   

    </form>

</body>

</html>

Hope this helps

 

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 55
Scott
Points 633
Replied On: Thu, Mar 31 2011 8:13 AM Reply

Thanks, that looks like exactly what I was looking for.

What tool can i use to see the sender and eventArgs properties/methods available. You never realize how much you need intellisense until it's not there!?

Such as where can I find out that there was a get_item() method off of args.

And furthermore, how would I find out that get_item() had a get_index() method??

Thanks,

  • Post Points: 5
Scott
Points 633
Replied On: Thu, Mar 31 2011 8:49 AM Reply

Expanding on the sample code you provided, how can I affect the style of each row, such as the code below, which currently throws an error saying [Microsoft JScript runtime error: Object doesn't support this property or method].... see code below:

 

function WebDataGrid1_Grid_MouseOver(sender, eventArgs)

{

    if (eventArgs.get_type() == "row") {

        eventArgs.get_type().get_element().setAttribute("style", "font-weight: bold");

    }

}

 

function WebDataGrid1_Grid_MouseOut(sender, eventArgs)

{

    if (eventArgs.get_type() == "row") {

        eventArgs.get_type().get_element().setAttribute("style", "font-weight: normal");

    }

}

  • Post Points: 20
Answered (Verified) Replied On: Thu, Mar 31 2011 9:12 AM Reply
Verified by Scott

Hi Scott,

You should look at the documentation to find out what properties/methods are available.

 Of course as much as we try to document everything there are some things that you can only find by debugging the code.

This can be easily done either with Visual Studio which has good javascript debugger or with the developer tools that are present in almost every browser.

To try out the visual studio debugger write "debugger;" in the javascript code and run the application in debug mode and it should break at that statement. All the visual studio debugging features like "Quick Watch" will be available and you can explore the objects that way.

Check this blog post for more information.

About your last question.

The "get_element()" method returns the actual html dom element so you should use its "style" property.

function WebDataGrid1_Grid_MouseOver(sender, eventArgs)
{
  if (eventArgs.get_type() == "row") {
    eventArgs.get_type().get_element().style.fontWeight = "bold";
  }
}

Hope this helps

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 70
Scott
Points 633
Replied On: Thu, Mar 31 2011 9:42 AM Reply

Well... it's seems I had a typo, it helps if we use get_item() and not get_type(), as soon as I changed it to get_item(), the line of code below in MouseOver worked perfectly.... however.... Now my MouseOut event is only firing for Header and Cell MouseOut events, no Row MouseOut events are registering... why would this occur?

eventArgs.get_item().get_element().style.fontWeight = "bold";

  • Post Points: 5
Scott
Points 633
Replied On: Thu, Mar 31 2011 10:04 AM Reply

I managed to find a workaround for the MouseOut issue... but now I'm trying to change the backgroundColor of the row and it does nothing, why is this happening?? Is there something overriding the backgroundColor. The font color and bold change is working as expected. See code below:

function WebDataGrid1_Grid_MouseOver(sender, eventArgs) {

    if (eventArgs.get_type() == "cell") {

        eventArgs.get_item().get_row().get_element().style.fontWeight = "bold";

        eventArgs.get_item().get_row().get_element().style.backgroundColor = "Yellow";

        eventArgs.get_item().get_row().get_element().style.color = "Red";

    }

    else if (eventArgs.get_type() == "row") {

        eventArgs.get_item().get_element().style.fontWeight = "bold";

        eventArgs.get_item().get_element().style.backgroundColor = "Yellow";

        eventArgs.get_item().get_element().style.color = "Red";

    }

}

function WebDataGrid1_Grid_MouseOut(sender, eventArgs) {

    if (eventArgs.get_type() == "cell") {

        eventArgs.get_item().get_row().get_element().style.fontWeight = "normal";

        eventArgs.get_item().get_row().get_element().style.backgroundColor = "";

        eventArgs.get_item().get_row().get_element().style.color = "";

    }

}

  • Post Points: 20
Answered (Verified) Replied On: Thu, Mar 31 2011 10:23 AM Reply
Verified by Scott

Hi Scott,

Sorry for the MouseOut issue.

Looks like the cells background is covering the row background so you need to set the desired background-color to every cell.

Have a look at this code.

 

function setRowCellsBackgroundColor(row, backgroundColor) {

                var cellCount = row.get_cellCount();

                for(var i = 0; i < cellCount; i++) {

                    row.get_cell(i).get_element().style.backgroundColor = backgroundColor;

                }

            }

 

            function WebDataGrid1_Grid_MouseOver(sender, eventArgs) {

                if (eventArgs.get_type() == "cell") {

                    eventArgs.get_item().get_row().get_element().style.fontWeight = "bold";

                    setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "Yellow");

                    eventArgs.get_item().get_row().get_element().style.color = "Red";

                }

                else if (eventArgs.get_type() == "row") {

                    eventArgs.get_item().get_element().style.fontWeight = "bold";

                    setRowCellsBackgroundColor(eventArgs.get_item(), "Yellow");

                    eventArgs.get_item().get_element().style.color = "Red";

                }

            }

 

            function WebDataGrid1_Grid_MouseOut(sender, eventArgs) {

                if (eventArgs.get_type() == "cell") {

                    eventArgs.get_item().get_row().get_element().style.fontWeight = "normal";

                    setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "");

                    eventArgs.get_item().get_row().get_element().style.color = "";

                }

            }

 

Thanks

 

Angel Yordanov,

Infragistics Data Visualisations Team

  • Post Points: 25
pankaj purohit
Points 5
Replied On: Fri, Apr 5 2013 6:21 AM Reply

I am writing same method what you have written & getting "Microsoft Jscript runtime error : Object does not support property or method 'get_element'


  • Post Points: 5
Page 1 of 1 (9 items) | RSS