Why does row selection cause the screen to jump to make the top of the grid visible. It only occurs in IE, Google Chrome (and Firefox as well) behaves as expected, making the row selection but keeping the webform in place and not jumping. ASPX and Code Behind to reproduce are below:
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<%@ Register Assembly="Infragistics4.Web.v10.2, Version=10.2.20102.1011, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Width="400px">
<Behaviors>
<ig:RowSelectors RowNumbering="True">
</ig:RowSelectors>
<ig:Selection CellClickAction="Row" CellSelectType="None"
RowSelectType="Multiple">
</ig:Selection>
</Behaviors>
</ig:WebDataGrid>
</div>
</form>
</body>
</html>
Hello Scott,
you have to enable Activation: <Behaviors> <ig:Activation Enabled="true" /> <ig:RowSelectors RowNumbering="True"> </ig:RowSelectors> <ig:Selection CellClickAction="Row" CellSelectType="None" RowSelectType="Multiple"> </ig:Selection></Behaviors>
Please let me know if you have any further questions with this matter.
That worked, but now it has some other undesired effects, see screenshots.
1) How do i remove the cell selection border/focus rectangle?
2) When row is deselected, how to i remove the highlight on the row selector?
Both things can be done with CSS. You can remove border rectangle like apply custom CSS class to Activation:
<ig:Activation Enabled="true" ActiveCellCssClass="igg_ActiveCell"/>
Removing row selector highlight is little more specific. You have to edit ig_dataGrid.css which is located in your ig_res\Default folder. Find .igg_ActiveRowSelector and comment everything between the curly brackets. This will remove highlight on deselection.
I modified your sample. Please refer to the attached file. Note that ig_res folder is missing in the archive because there is limit upload file size. You have to copy ig_res folder and after that replace ig_grid.css with the new one.
Please let me know if need additional assistance.
My active cell in the css file is blank, see below:
tbody>tr>td.igg_ActiveCell
{
}
so setting it in the Activation attributes does nothing for the border for selected cell.
I was able to get the deselection of the highlight on the row selector corrected, i had to make the changes as below to get the desired effect:
.igg_ActiveRowSelectorImage
/*color:White;*/
.igg_ActiveRowSelector
background-position:left center ;
/*background-image: url(images/selectedrowselector.gif);*/
background-repeat: no-repeat;
background-color: #8DC6EC;
Sorry... i didn't catch that in the zip file you attached previously... but it worked exactly as desired now, thanks! :)
<head runat="server"> <title></title> <style type="text/css"> .igg_ActiveCell { outline: none; } </style></head><body> <form id="form2" runat="server"> <div> <ig:WebDataGrid ID="WebDataGrid1" runat="server" Width="400px" > <Behaviors> <ig:Activation Enabled="true" ActiveCellCssClass="igg_ActiveCell"/>
This will remove selection border. Please take a look at the attached file in the previous post.
Let me know if it is working in your scenario.
sorry, i meant this for the ActiveRowSelector css...
/*background-color: #8DC6EC;*/