When I click on a cell to edit (CellClickAction="Edit"), the window position doesn't move, no scrolling occurs. Everything is just fine, except my row isn't selected so my style for the background color of the row doesn't work. I want to know why selecting the cell or editing the cell doesn't by definition select the row.
To get around this, I tried to use RowSelect. When I set the cell to select the row (CellClickAction="RowSelect"), the window scrolls to the top so I can't see the row that's been selected any more and editing the cell becomes an exerise in futility. Note that it's the actual window that is scrolled -- if I set a height on the Grid, the scroll position in that piece is maintained properly but the whole window is scrolled to the top. When I have 2 grids on a page, this is a serious problem and prevents editing.
This is with the newest package, using IE8. I want to know why editing the cell doesn't do the window scrolling thing, but selecting the row does. Obviously, selecting and editing the cell doesn't select the row (my first point), so what exactly happens on row selection that isn't happening on cell selection?
No matter what the cell mode, clicking on the row selector to select the row does exhibit this odd window scroll behavior.
Any help appreciated. I'm at my wits end with this control, it isn't doing anything I want it to do properly. Thanks!
ETA:
Scrolling issue on row selection easily recreated with the following example
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" MaintainScrollPositionOnPostback="true" %><%@ Register Assembly="Infragistics2.WebUI.UltraWebGrid.v9.1, Version=9.1.20091.1015, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %><!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>Untitled Page</title></head><body> <form id="form1" runat="server"> Testing Infragistics<br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued]) VALUES (@ProductName, @SupplierID, @CategoryID, @QuantityPerUnit, @UnitPrice, @UnitsInStock, @UnitsOnOrder, @ReorderLevel, @Discontinued)" SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [UnitsOnOrder] = @UnitsOnOrder, [ReorderLevel] = @ReorderLevel, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"> <DeleteParameters> <asp:Parameter Name="ProductID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="SupplierID" Type="Int32" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="UnitsOnOrder" Type="Int16" /> <asp:Parameter Name="ReorderLevel" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> <asp:Parameter Name="ProductID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="SupplierID" Type="Int32" /> <asp:Parameter Name="CategoryID" Type="Int32" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="UnitsInStock" Type="Int16" /> <asp:Parameter Name="UnitsOnOrder" Type="Int16" /> <asp:Parameter Name="ReorderLevel" Type="Int16" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> </InsertParameters> </asp:SqlDataSource> <br /> <div style="position:relative;height:100%"> <igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" DataMember="DefaultView" DataSourceID="SqlDataSource1" Height="100%" Width="600px"> <Bands> <igtbl:UltraGridBand> <Columns> <igtbl:UltraGridColumn BaseColumnName="ProductID" DataType="System.Int32" IsBound="True" Key="ProductID"> <Header Caption="ProductID"> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="ProductName" IsBound="True" Key="ProductName"> <Header Caption="ProductName"> <RowLayoutColumnInfo OriginX="1" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="1" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="SupplierID" DataType="System.Int32" IsBound="True" Key="SupplierID"> <Header Caption="SupplierID"> <RowLayoutColumnInfo OriginX="2" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="2" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="CategoryID" DataType="System.Int32" IsBound="True" Key="CategoryID"> <Header Caption="CategoryID"> <RowLayoutColumnInfo OriginX="3" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="3" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="QuantityPerUnit" IsBound="True" Key="QuantityPerUnit"> <Header Caption="QuantityPerUnit"> <RowLayoutColumnInfo OriginX="4" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="4" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="UnitPrice" DataType="System.Decimal" IsBound="True" Key="UnitPrice"> <Header Caption="UnitPrice"> <RowLayoutColumnInfo OriginX="5" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="5" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="UnitsInStock" DataType="System.Int16" IsBound="True" Key="UnitsInStock"> <Header Caption="UnitsInStock"> <RowLayoutColumnInfo OriginX="6" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="6" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="UnitsOnOrder" DataType="System.Int16" IsBound="True" Key="UnitsOnOrder"> <Header Caption="UnitsOnOrder"> <RowLayoutColumnInfo OriginX="7" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="7" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="ReorderLevel" DataType="System.Int16" IsBound="True" Key="ReorderLevel"> <Header Caption="ReorderLevel"> <RowLayoutColumnInfo OriginX="8" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="8" /> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="Discontinued" DataType="System.Boolean" IsBound="True" Key="Discontinued" Type="CheckBox"> <Header Caption="Discontinued"> <RowLayoutColumnInfo OriginX="9" /> </Header> <Footer> <RowLayoutColumnInfo OriginX="9" /> </Footer> </igtbl:UltraGridColumn> </Columns> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout AllowColSizingDefault="Free" AllowColumnMovingDefault="OnServer" AllowDeleteDefault="Yes" AllowSortingDefault="OnClient" AllowUpdateDefault="Yes" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" Name="UltraWebGrid1" RowHeightDefault="20px" SelectTypeRowDefault="Single" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="4.00" AllowAddNewDefault="Yes" SelectTypeCellDefault="Single"> <FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" Height="100%" Width="600px"> </FrameStyle> <Pager MinimumPagesForDisplay="2"> <PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </PagerStyle> </Pager> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt"> <Padding Left="3px" /> <BorderDetails ColorLeft="Window" ColorTop="Window" /> </RowStyleDefault> <GroupByRowStyleDefault BackColor="Control" BorderColor="Window"> </GroupByRowStyleDefault> <GroupByBox> <BoxStyle BackColor="ActiveBorder" BorderColor="Window"> </BoxStyle> </GroupByBox> <AddNewBox Hidden="False"> <BoxStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </BoxStyle> </AddNewBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> <FilterOptionsDefault> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Height="300px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> </FilterOptionsDefault> </DisplayLayout> </igtbl:UltraWebGrid></div> </form></body></html>
Follow up, since I rediscovered this thread while looking for a similar issue, and people have asked about it.
The grid is being focused somewhere along the way when a row is selected. When a control gets focus, the browser scrolls to the top of that element.
Turning on activation did nothing for my problem. I ended up working around it by handling the row selector event, activating a cell, then opening the edit template in code.
function ugApps_AfterRowActivateHandler(gridName, rowId) {
// Row selection without a cell activated will cause the grid to focus
// instead of the cell which in effect causes the grid to scroll
// to the top.
var grid = igtbl_getGridById(gridName);
var row = grid.Rows.getRowById(rowId);
var cell = row.getCell(2);
grid.setActiveCell(cell);
// Setting the active cell to fix the scroll issue breaks the user opening the edit template
// so we have to do that here for them.
grid.beginEditTemplate();
}
This happens with WebGrid and WebHierarchalGrid as well.
Can someone please explain how to stop it!!
I too have the same problem with 2009.2 and 2010.2, all service releases. Very annoying when there is more than 1 page of data and you click to expand a row and the page scrolls to the top.
Was there ever an answer as to why the grid scolls to the top when a row is selected? I am having the same problem.
Was there ever an answer as to why it scrolls to the top when a row is selected? I am having the same problem. scrollToView does not work either.