RadGrid Batch -> On Enter Update

[Garetjax]

I have a RadGrid that is bound to a objectDataSource and everything is working when using the save/cancel buttons for initiating a change; however when the user presses enter after supplying a value... the data will not submit; it just refreshes the datasource.

Here is some sample code:

01.<%@ Page Title="Goods Received" Language="C#" MasterPageFile="~/App_Masterpage/PurchaseRequest.master" AutoEventWireup="true" CodeFile="Received.aspx.cs" Inherits="apps_rc_purchasing_my_Default" %>
02.
03.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
04.<asp:Content ID="Content2" ContentPlaceHolderID="main_content" runat="Server">
05.    <div class="container">
06.        <div class="row">
07.            <h3>Goods Received</h3>
08.            <p>
09.                This page has been configured to allow you to adjust the received quantity.
10.            </p>
11.        </div>
12.        <div class="row">
13.            <telerik:RadGrid ID="rgRequests" MasterTableView-DataKeyNames="DPO,DLINE" MasterTableView-EnableViewState="true"
14.                OnPreInit="rgRequests_PreInit" EnableViewState="true" ItemStyle-Font-Size="smaller" AlternatingItemStyle-Font-Size="smaller"
15.                EnableLinqExpressions="false" PageSize="20" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="false" runat="server"
16.                CssClass="cat table table-bordered" DataSourceID="odsRequests" OnItemUpdated="rgRequests_ItemUpdated"
17.                AllowAutomaticInserts="false" AllowAutomaticUpdates="true" AutoGenerateColumns="false" Skin="Metro">
18.                <MasterTableView EditFormSettings-EditColumn-AutoPostBackOnFilter="true" HeaderStyle-CssClass="subhead" BatchEditingSettings-EditType="Row"
19.                    EditMode="Batch" CommandItemSettings-SaveChangesText="Save" CommandItemSettings-ShowSaveChangesButton="true"
20.                    CommandItemDisplay="TopAndBottom"  CommandItemSettings-ShowAddNewRecordButton="false" CommandItemSettings-ShowRefreshButton="false">
21.                    <Columns>
22.                        <telerik:GridBoundColumn ReadOnly="true" AllowFiltering="false" HeaderStyle-Width="30px" HeaderText="PO #" DataField="DPO" Visible="true" />
23.                        <telerik:GridBoundColumn ReadOnly="true" AllowFiltering="false" HeaderStyle-Width="30px" HeaderText="Line #" DataField="DLINE" Visible="true" UniqueName="DLINE" />
24.                        <telerik:GridBoundColumn ReadOnly="true" AllowSorting="true" CurrentFilterFunction="Contains" HeaderStyle-Width="180px" AutoPostBackOnFilter="true" DataField="DITEM" HeaderText="Item" MaxLength="25" />
25.                        <telerik:GridNumericColumn ReadOnly="true" AllowSorting="true" CurrentFilterFunction="Contains" HeaderStyle-Width="180px" AutoPostBackOnFilter="true" DataField="DQTY" HeaderText="Quantity" MaxLength="25" />
26.                        <telerik:GridNumericColumn AllowSorting="true" CurrentFilterFunction="Contains" HeaderStyle-Width="180px" AutoPostBackOnFilter="true" DataField="DRQTY" HeaderText="Rcvd Quantity" MaxLength="25" UniqueName="DRQTY" />
27.                    </Columns>
28.                </MasterTableView>
29.            </telerik:RadGrid>
30.        </div>
31.        <div class="row" runat="server" id="dbInfo">
32.            <div class="text-danger" runat="server">
33.                <h3>Admin Information</h3>
34.                <div class="list-group">
35.                    <div id="notify" class="list-group-item" runat="server"></div>
36.                </div>
37.            </div>
38.            <div class="example">
39.                <strong>Database:</strong><small>Web.Config - LIBD31USR - POPPOD - INLINE DATASOURCE - <strong>Usage:</strong> <span class="bs bs-example text-success">RiggsCAT.Finance.PurchaseRequestDET.Search(string search), PurchaseRequestDET.Update(string POID, string DLINE, int DRQTY)</span></small>
40.                <asp:ObjectDataSource ID="odsRequests" runat="server" SelectMethod="GetRequestsByPO" TypeName="RiggsCAT.Finance.PurchaseRequestDET" UpdateMethod="UpdateReceivedQty">
41.                    <SelectParameters>
42.                        <asp:QueryStringParameter QueryStringField="POID" Type="String" Name="PO" />
43.                    </SelectParameters>
44.                    <UpdateParameters>
45.                        <asp:Parameter Name="DPO" Type="String"  />
46.                        <asp:Parameter Name="DLINE" Type="String" />
47.                        <asp:Parameter Name="DRQTY" Type="Int32" />
48.                    </UpdateParameters>
49.                </asp:ObjectDataSource>
50.            </div>
51.        </div>
52.    </div>
53.</asp:Content>

[Konstantin Dikov]

Hi,

When you press the "Enter" key, it is the default behavior of the form to find the first submit element within the form and submit the page through it. If you need to override that behavior within the grid, you need to enable the keyboard navigation and set the AllowSubmitOnEnter property to false:

<ClientSettings AllowKeyboardNavigation="true">
    <KeyboardNavigationSettings AllowSubmitOnEnter="false" />
</ClientSettings>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Garetjax]

I get that; however it is actually not submitting the form...it is refreshing the datasource (as though a rebind has occurred) which is what I believe I had said.  The postback should be posting the input parameters via the input controls provided on the page.

I actually want the form to be submitted via Enter key...but, the RadGrid is not doing that.  It is refreshing the datasource; there is no submit.

[Konstantin Dikov]

Hello,

If you need to perform some custom logic when the Enter key is pressed, you need to handle the onkeydown event of the RadGrid's wrapping DIV element, manually cancel the event and execute your custom logic. You should have in mind that in order for the grid (in Batch edit mode) to pass the data to the server, you need to use the "Save Changes" button or manually initiate the saving through the BatchEditingManager.

Following is a simple example with initiating the saving through the BatchEditingManager:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function handleEnterKey(element, ev) {
            if (ev.keyCode == 13) {
                preventEvent(ev);
                var grid = $find(element.id);
                var batchManager = grid.get_batchEditingManager();
                var tableView = grid.get_masterTableView();
                batchManager._tryCloseEdits(tableView);
                setTimeout(function () {
                    batchManager.saveChanges(grid.get_masterTableView());
                })
            }
        }

        function preventEvent(e) {
            var evt = e ? e : window.event;
            if (evt.stopPropagation) evt.stopPropagation();
            if (evt.preventDefault) evt.preventDefault();
            if (evt.cancelBubble != null) evt.cancelBubble = true;
            if (evt.stopImmediatePropagation) evt.stopImmediatePropagation();
            evt.returnValue = false;
        }

    </script>
</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" onkeydown="handleEnterKey(this, event);"
     OnBatchEditCommand="RadGrid1_BatchEditCommand">
    <MasterTableView EditMode="Batch">
    </MasterTableView>
</telerik:RadGrid>

The above example will initiate saving once you press the Enter key within the grid.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Garetjax]

There is no OnKeyDown Attribute to the RadGrid???

Do you Mean ClientSettings-ClientEvents-OnKeyPress

[Konstantin Dikov]

Hi,

Although that there is no "onkeydown" property of the grid, but that code will be included in the generated wrapping DIV element of the grid and the "onkeydown" event will fire every time when a key is pressed within the grid.

If you test the example that I have provided in my previous post you will see that it is initiating saving when the Enter key is press, as per your requirement. 


Regards,
Konstantin Dikov
Telerik