This is a migrated thread and some comments may be shown as answers.

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

1 Answer 68 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert Daggar
Top achievements
Rank 1
Robert Daggar asked on 30 May 2012, 01:04 AM
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. 

1 Answer, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 31 May 2012, 09:12 PM
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!
Tags
Grid
Asked by
Robert Daggar
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or