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.
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
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)
eventArgs.get_type().get_element().setAttribute("style", "font-weight: normal");
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"; }}
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) {
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 = "";
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;
setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "Yellow");
setRowCellsBackgroundColor(eventArgs.get_item(), "Yellow");
setRowCellsBackgroundColor(eventArgs.get_item().get_row(), "");
Thanks