[Solved] Keyboard Navigation w/annoying auto scroll

[bemana]

I have a grid with the following:

- Keyboard navigation turned on
- Scrolling turned on and lots of records
- Client side selection and operation

If I scroll the grid down, say, halfway and select a row with the mouse everything is fine.  If I then use the up/down arrow to move the selection, the grid will automatically scroll so that the newly selected row is visible as the last visible row.  This auto scroll is disorienting.  Why does it do this? Can this auto scroll behavior be stopped?  Thanks!

The grid markup:

        <telerik:RadGrid ID="RadGridEmails" runat="server" AllowSorting="True" PageSize="100" Height="100%" Width="100%"
            AllowMultiRowSelection="True" EnableViewState="false" AllowPaging="True" GridLines="None" Skin="Default" >
            <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric"></PagerStyle>
            <ItemStyle Height="10px"    />
            <MasterTableView ClientDataKeyNames="ID, MailBoxID" AllowMultiColumnSorting="False" TableLayout="Fixed" Width="810px"  >
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="tcNotRead" SortExpression="" Resizable="false" DataField="Status" HeaderText="&nbsp;">
                        <HeaderStyle HorizontalAlign="Center" Width="30px" ></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" Width="30px"></ItemStyle>
                        <ItemTemplate>
                            <asp:Image id="imgMailStatus" ImageUrl="~/Media/Images/Icons/NotRead.gif" BorderWidth="0px" style=" border-style:none; padding:0px; margin:0px" runat="server" AlternateText="" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                   
                    <telerik:GridTemplateColumn UniqueName="tcAttachments" SortExpression="" Resizable="false" DataField="HasAttachments2" HeaderText="&nbsp;">
                        <HeaderStyle Width="30px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" Width="30px"></ItemStyle>
                        <ItemTemplate>
                            <asp:Image ID="imgHasAttachments" ImageUrl="~/Media/Images/Icons/clrImg.gif" BorderWidth="0px"  style=" border-style:none; padding:0px; margin:0px" AlternateText="Has Attachments" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                   
                    <telerik:GridTemplateColumn UniqueName="tcFlag" SortExpression="" DataField="Mark" Resizable="false" HeaderText="&nbsp;">
                        <HeaderStyle HorizontalAlign="Center" Width="30px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" Width="30px"></ItemStyle>
                        <ItemTemplate>
                            <asp:Image ID="imgMailFlag" ImageUrl="~/Media/Images/Icons/grayFlag.gif" BorderWidth="0px"  style=" border-style:none; padding:0px; margin:0px" AlternateText="" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>                
                   
                    <telerik:GridTemplateColumn UniqueName="bcToFrom" SortExpression="TO-FROM" HeaderText="To/From">
                        <ItemStyle  Width="150px" ></ItemStyle>
                        <HeaderStyle Width="150px"></HeaderStyle>
                        <ItemTemplate>
                        <div style="white-space: nowrap;overflow:hidden;text-overflow:ellipsis; width:100%;"><asp:Label ID="lblToFrom" runat="server"></asp:Label></div>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                   
                    <telerik:GridBoundColumn UniqueName="bcSubject" DataFormatString="{0}" SortExpression="Subject" HeaderText="Subject" DataField="Subject">
                        <ItemStyle  Width="400px" ></ItemStyle>
                        <HeaderStyle Width="400px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                   
                    <telerik:GridTemplateColumn UniqueName="tcDate" SortExpression="DateTimeStampUtc" HeaderText="Date">
                    <ItemStyle Width="110px" ></ItemStyle>
                        <HeaderStyle Width="110px"></HeaderStyle>
                    <ItemTemplate>
                     <div style="white-space: nowrap;overflow:hidden;text-overflow:ellipsis; width:100%;"><asp:Label ID="lblDate" runat="server"></asp:Label></div>
                  </ItemTemplate>
                    </telerik:GridTemplateColumn>
                   
                    <telerik:GridBoundColumn UniqueName="bcSize" DataFormatString="{0}" SortExpression="RealSize" HeaderText="Size" DataField="RealSize">
                        <ItemStyle  Width="60px" HorizontalAlign="Right"></ItemStyle>
                        <HeaderStyle Width="60px" HorizontalAlign="Right"></HeaderStyle>
                    </telerik:GridBoundColumn>
                </Columns>    
                <NoRecordsTemplate><div style="text-align: center; padding: 5px">No mail found.</div></NoRecordsTemplate>          
            </MasterTableView>
            <ClientSettings AllowColumnHide="True" AllowKeyboardNavigation="true" EnableRowHoverStyle="true" ReorderColumnsOnClient="false" >
                <ClientEvents  OnRowContextMenu="RowContextMenu" OnCommand="RadGridEmails_Command" OnRowDataBound="RadGridEmails_RowDataBound" OnRowSelected="RadGridEmails_RowSelected" OnRowSelecting="RadGridEmails_RowSelecting"/>
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="True" UseStaticHeaders="true"  ></Scrolling>
                <Resizing ResizeGridOnColumnResize="true" AllowRowResize="false" AllowColumnResize="True" ></Resizing>
            </ClientSettings>           
        </telerik:RadGrid>

[Pavlina]

Hello Brandon,

There are situations in which you may want to navigate through the grid items and select them at the same time (when single row selection is enabled). This can be attained with a few lines of javascript code.
More information is available here:
Synchronizing keyboard navigation and row selection

I hope this helps.

Greetings,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.