How to cancel scrolling or reset the scrolling position in client side KeyPress event

[Robert Daggar]

Hi,

We are tring to customize the key-press behaviors on a RadGrid. The example of the RadGrid and the JavaScript code  shown below. What we want is to cancel scrolling and make the next cell in edit mode when a user press the arrow down key. Is that any way to allow me to do so? Please help!

<telerik:RadGrid runat="server" ID="radgrid" ...>

  <MasterTableView TableLayout="Fixed">

       <Columns>...</Columns>

  </MasterTableView>

  

  <ClientSettings>

     <Scrolling AllowScroll="true" UseStaticHeaders="true" />

     <ClientEvents  OnKeyPress="keyPress" />

  </ClientSettings>

</telerik:RadGrid>

 

 

        oldScrollTop  = 0;

 

        function keyPress(sender, args) {

                var keyCode = args.get_keyCode();

 

                switch (keyCode) {

                    //If Down Key

                    case 40:

 

                        //set the scrolling position in propor

                        var scrollArea = document.getElementById(sender.get_element().id + "_GridData");

                         

                       //try to cancel the scrolling and it's not working

                       //sender.ClientSettings.AllowScroll = false;

                         

                       //try to set the scroll-area top position as same as the top of the first row,
                                //but scrollArea.scrollTop always be assigned to 53

                       scrollArea.scrollTop = 0;

                       break;

                }

        }

Anyway, I knew that we can use the paging stuff to avoid scrolling problem. However, we do want to have scrolling function on the Grid. 

[Richard]

Robert:

The following combination of client settings and associated JavaScript works for me. When the user presses the Arrow Down Key (Key Code is 40), the next row in the MasterTableView gets selected and opens in Edit Mode. The scrolling is immediately canceled.

Default.aspx:

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" AllowSorting="True"
    AllowPaging="False" runat="server" GridLines="None" Width="95%" OnItemCommand="RadGrid1_ItemCommand"
    CellSpacing="0" >
    <ExportSettings HideStructureColumns="true" />
    <ExportSettings HideStructureColumns="True">
    </ExportSettings>
    <MasterTableView Width="100%" CommandItemDisplay="Top" AutoGenerateColumns="False"
        DataKeyNames="CustomerID" >
        <CommandItemSettings ExportToPdfText="Export to PDF" ShowExportToExcelButton="True"
            ShowExportToWordButton="True" ShowExportToCsvButton="True"></CommandItemSettings>
        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="CustomerID" FilterControlAltText="Filter CustomerID column"
                HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column"
                HeaderText="CompanyName" SortExpression="CompanyName" UniqueName="CompanyName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ContactName" FilterControlAltText="Filter ContactName column"
                HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column"
                HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column"
                HeaderText="Address" SortExpression="Address" UniqueName="Address">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PostalCode" FilterControlAltText="Filter PostalCode column"
                HeaderText="PostalCode" SortExpression="PostalCode" UniqueName="PostalCode">
            </telerik:GridBoundColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
        <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
            ShowExportToCsvButton="true" />
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true" ClientEvents-OnKeyPress="KeyPressed">
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
</telerik:RadGrid>

JavaScript:

        function KeyPressed(sender, eventArgs) {
            if (eventArgs.get_keyCode() == 40) {
                var masterTableView = sender.get_masterTableView();
                var selectedItems = masterTableView.get_selectedItems();
                var prevSelectedItem = selectedItems[0];
                var row = prevSelectedItem.get_itemIndexHierarchical();
                var dataItems = masterTableView.get_dataItems();
                masterTableView.editItem(dataItems[++row].get_element());
            }
        }

See this in action at: http://screencast.com/t/B8V1P6Rt

Hope this helps!