[Solved] In insert/edit mode, grid is sorting on [ENTER] key

[Bryan Haas]

So, I'm trying to set up my grid with keyboard shortcuts.  The following shortcuts work well: grid focus (ctrl-Y), item navigation (up/down keys), insert new item (ctrl-I), edit active item (enter key), and cancel insert/edit (esc key).  However, when an item is in insert/edit mode and I want to save the changes, I should be able to hit the enter key -- but, the grid sorts and I lose all my changes when I hit the enter key.  Why is the grid sorting???  I imagine that if I can solve the sorting issue, then the changes will be saved appropriately -- I hope.

Below is my grid markup...

            <telerik:RadGrid ID="grdCodeLists" runat="server"
                GridLines="None" AllowPaging="true" PageSize="10"
                AllowSorting="true" AllowFilteringByColumn="false"
                AutoGenerateColumns="false" ShowGroupPanel="false"
                AllowMultiRowEdit="false" AllowAutomaticDeletes="false"
                AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                OnNeedDataSource="grdCodeLists_NeedDataSource"
                OnInsertCommand="grdCodeLists_InsertCommand"
                OnUpdateCommand="grdCodeLists_UpdateCommand"
                OnDeleteCommand="grdCodeLists_DeleteCommand">

                <ClientSettings
                    EnableRowHoverStyle="true"
                    AllowKeyboardNavigation="true">
                    <Selecting AllowRowSelect="true" />
                    <KeyboardNavigationSettings
                        EnableKeyboardShortcuts="true"
                        AllowActiveRowCycle="true"
                        FocusKey="Y" RebindKey="R" InitInsertKey="I" />
                    <ClientEvents OnRowSelected="RowSelected" />
                </ClientSettings>

                <SortingSettings
                    SortedAscToolTip="Click to sort descending..."
                    SortedDescToolTip="Click to sort ascending..."
                    EnableSkinSortStyles="true" />

                <PagerStyle
                    AlwaysVisible="true"
                    Mode="NextPrevAndNumeric"
                    Position="Bottom" />

                <MasterTableView
                    TableLayout="Fixed"
                    EditMode="InPlace"
                    CommandItemDisplay="None"
                    DataKeyNames="CodeListID"
                    AllowNaturalSort="false">
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="CodeListName" SortOrder="Ascending" />
                    </SortExpressions>
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Code List ID" DataField="CodeListID" MaxLength="4" UniqueName="colID" />
                        <telerik:GridBoundColumn HeaderText="Code List Name" DataField="CodeListName" SortExpression="CodeListName"
                            SortDescImageUrl="~/Images/icon_arrowDown.gif" SortAscImageUrl="~/Images/icon_arrowUp.gif"
                            MaxLength="8" UniqueName="colName" />
                        <telerik:GridBoundColumn HeaderText="Code List Description" DataField="CodeListDescription" MaxLength="16" UniqueName="colDescription" />
                        <telerik:GridEditCommandColumn HeaderText="Edit" HeaderStyle-HorizontalAlign="Center"
                            HeaderStyle-Width="65" ButtonType="ImageButton" EditImageUrl="~/Images/icon_edit.gif"
                            UniqueName="colEdit" ItemStyle-HorizontalAlign="Center" />
                        <telerik:GridButtonColumn HeaderText="Delete" HeaderStyle-HorizontalAlign="Center"
                            HeaderStyle-Width="65" ConfirmText="Delete Code List?" ConfirmDialogType="RadWindow"
                            ConfirmTitle="Delete Code List" ButtonType="ImageButton" CommandName="Delete"
                            UniqueName="colDelete" ImageUrl="~/Images/icon_delete.gif" ItemStyle-HorizontalAlign="Center" />
                    </Columns>
                </MasterTableView>

            </telerik:RadGrid>

[Bryan Haas]

So, I was able to finally get the keyboard support working, but it is not a straight forward solution.  I used bits and pieces of code from solutions in these forums, as well as some code of my own...

If anyone has time, including Telerik personnel, to take a look at my solution and provide some input, I would greatly appreciate it (I would have attached zipped files, but I couldn't figure out how to do that here)...

Here is the code behind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page
{
    private const string _CODE_LISTS = "CodeLists";

    private ArrayList _CodeLists = null;
    private ArrayList CodeLists
    {
        get
        {
            _CodeLists = (ArrayList)this.Page.Cache.Get(_CODE_LISTS);
            if (_CodeLists == null)
            {
                _CodeLists = this.GetCodeLists();
                this.Page.Cache.Insert(_CODE_LISTS, _CodeLists);
            }
            return _CodeLists;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) { this.Page.Cache.Remove(_CODE_LISTS); }
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
    }

    protected void grdCodeLists_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        thisthis.grdCodeLists.DataSource = this.CodeLists;
    }

    protected void grdCodeLists_InsertCommand(object source, GridCommandEventArgs e)
    {
        CodeList newCodeList = this.GetCodeList(e);
        if (!this.CodeLists.Contains(newCodeList)) { this.CodeLists.Add(newCodeList); }
    }

    protected void grdCodeLists_UpdateCommand(object source, GridCommandEventArgs e)
    {
        CodeList updateCodeList = this.GetCodeList(e);
        int index = this.CodeLists.IndexOf(updateCodeList);
        if (index >= 0)
        {
            this.CodeLists.RemoveAt(index);
            this.CodeLists.Insert(index, updateCodeList);
        }
    }

    protected void grdCodeLists_DeleteCommand(object source, GridCommandEventArgs e)
    {
        CodeList deleteCodeList = this.GetCodeList(e);
        if (this.CodeLists.Contains(deleteCodeList)) { this.CodeLists.Remove(deleteCodeList); }
    }

    protected void grdCodeLists_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem && e.Item.IsInEditMode)
        {
            GridDataItem item = e.Item as GridDataItem;
            List<GridColumn> editableColumns = item.OwnerTableView.RenderColumns.Select(c => c).Where
                (
                    c =>
                    {
                        if (c is GridEditableColumn)
                        {
                            GridEditableColumn column = (GridEditableColumn)c;
                            return !column.ReadOnly && column.IsEditable;
                        }
                        return false;
                    }
                ).ToList();

            int lastIndex = editableColumns[editableColumns.Count - 1].OrderIndex;
            editableColumns.ForEach
                (
                    c =>
                    {
                        TableCell editCell = (TableCell)item.EditManager.GetColumnEditor(c.UniqueName).ContainerControl;
                        string script = String.Format("HandleKeyPress(this,event,'{0}','{1}','{2}');",
                            item.OwnerTableView.ClientID, item.ItemIndex, (c.OrderIndex == lastIndex));
                        editCell.Attributes.Add("onkeydown", script);
                    }
                );

            TextBox txt = e.Item.FindControl("txtID") as TextBox;
            if (txt != null) { txt.Focus(); }
        }
    }

    private CodeList GetCodeList(GridCommandEventArgs e)
    {
        CodeList oCodeList = null;

        try
        {
            GridEditableItem updateItem = e.Item as GridEditableItem;
            Hashtable updateValues = new Hashtable();
            e.Item.OwnerTableView.ExtractValuesFromItem(updateValues, updateItem);

            int ID = Convert.ToInt32(updateValues["CodeListID"]);
            string Name = updateValues["CodeListName"].ToString();
            string Description = updateValues["CodeListDescription"].ToString();

            oCodeList = new CodeList(ID, Name, Description);
        }
        catch
        {
            oCodeList = null;
        }

        return oCodeList;
    }

    private ArrayList GetCodeLists()
    {
        ArrayList alItems = null;
        string strItem = null;

        try
        {
            alItems = new ArrayList();
            for (int index = 1; index <= 30; index++)
            {
                strItem = index.ToString();
                strItem = (index >= 10) ? "ITEM " + strItem : "ITEM 0" + strItem;
                alItems.Add(new CodeList(index, strItem, "This is " + strItem));
            }
        }
        catch
        {
            alItems = null;
        }

        return alItems;
    }
}

public class CodeList
{
    public int CodeListID { get; set; }
    public string CodeListName { get; set; }
    public string CodeListDescription { get; set; }

    public CodeList() {}

    public CodeList(int ID, string Name, string Description)
    {
        this.CodeListID = ID;
        this.CodeListName = Name;
        this.CodeListDescription = Description;
    }

    public override bool Equals(object o)
    {
        if (o is CodeList)
        {
            CodeList oCodeList = (CodeList)o;
            return (this.CodeListID == oCodeList.CodeListID) || (this.CodeListName == oCodeList.CodeListName);
        }
        else
        {
            throw (new Exception("Object is not a CodeList"));
        }
    }

    public override int GetHashCode()
    {
        return this.CodeListID.GetHashCode() ^ this.CodeListName.GetHashCode();
    }
}

Here is the markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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></title>
    <link rel="Stylesheet" href="Default.css" type="text/css" />
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            </Scripts>
        </telerik:RadScriptManager>

        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Forest" />

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">

                var selectedRow = null;
                var activeRow = null;

                function ActiveRowChanged(sender, args) {
                    // synchronize selected row with active row
                    activeRow = args.get_id();
                    var grid = $find(sender.get_id());
                    var masterTable = grid.get_masterTableView();

                    if (activeRow != selectedRow) {
                        selectedRow = activeRow;
                        masterTable.selectItem($get(selectedRow));
                    }
                }

                function RowSelected(sender, args) {
                    // synchronize active row with selected row
                    selectedRow = args.get_id();
                    var grid = $find(sender.get_id());

                    if (selectedRow != activeRow) {
                        activeRow = selectedRow;
                        grid.set_activeRow($get(activeRow));
                    }
                }

                function PreventDefaultBehavior(e) {
                    e.cancelBubble = true;
                    e.returnValue = false;
                    if (e.preventDefault)
                        e.preventDefault();
                    if (e.stopPropagation)
                        e.stopPropagation();
                }

                function HandleKeyPress(cell, args, tableView, itemIndex, isLastColumn) {
                    var e = args || window.event;
                    if (e.keyCode == 13) {
                        // enter pressed
                        if (isLastColumn == "True") {
                            PreventDefaultBehavior(e);

                            // update/insert row on last item
                            var table = $find(tableView);
                            if (parseInt(itemIndex) >= 0) {
                                table.updateItem(itemIndex);
                            }
                            else {
                                table.insertItem();
                            }
                        }
                        e.keyCode = 9; // tab key
                    }
                    if (e.keyCode == 27) {
                        // escape pressed
                        PreventDefaultBehavior(e);

                        // cancel update
                        var table = $find(tableView);
                        table.cancelUpdate(itemIndex);
                    }
                }

            </script>
        </telerik:RadCodeBlock>

        <div>

            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr valign="middle">
                    <td align="left">
                        <h1>Code Lists</h1>
                    </td>
                </tr>
            </table>

            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" >
                <telerik:RadGrid ID="grdCodeLists" runat="server"
                    GridLines="None" AllowPaging="true" PageSize="10"
                    AllowSorting="true" AllowFilteringByColumn="false"
                    AutoGenerateColumns="false" ShowGroupPanel="false"
                    AllowMultiRowEdit="false" AllowAutomaticDeletes="false"
                    AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                    OnNeedDataSource="grdCodeLists_NeedDataSource"
                    OnInsertCommand="grdCodeLists_InsertCommand"
                    OnUpdateCommand="grdCodeLists_UpdateCommand"
                    OnDeleteCommand="grdCodeLists_DeleteCommand"
                    OnItemCreated="grdCodeLists_ItemCreated">

                    <ClientSettings
                        EnableRowHoverStyle="true"
                        AllowKeyboardNavigation="true">
                        <Selecting AllowRowSelect="true" />
                        <KeyboardNavigationSettings
                            EnableKeyboardShortcuts="true"
                            AllowActiveRowCycle="true"
                            FocusKey="Z" RebindKey="R" InitInsertKey="I" />
                        <ClientEvents
                            OnRowSelected="RowSelected"
                            OnActiveRowChanged="ActiveRowChanged" />
                    </ClientSettings>

                    <SortingSettings
                        SortedAscToolTip="Click to sort descending..."
                        SortedDescToolTip="Click to sort ascending..."
                        EnableSkinSortStyles="true" />

                    <PagerStyle
                        AlwaysVisible="true"
                        Mode="NextPrevAndNumeric"
                        Position="Bottom" />

                    <MasterTableView
                        AccessKey="X"
                        TableLayout="Fixed"
                        EditMode="InPlace"
                        CommandItemDisplay="Top"
                        InsertItemPageIndexAction="ShowItemOnCurrentPage"
                        DataKeyNames="CodeListID"
                        AllowNaturalSort="false">
                        <CommandItemSettings AddNewRecordText="Add Code List" />
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="CodeListName" SortOrder="Ascending" />
                        </SortExpressions>
                        <Columns>
                            <telerik:GridTemplateColumn HeaderText="Code List ID" DataField="CodeListID" UniqueName="colID" >
                                <ItemTemplate >
                                    <asp:Label ID="lblID" runat="server" ><%# Eval("CodeListID")%></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate >
                                    <asp:TextBox ID="txtID" runat="server" Text='<%# Bind("CodeListID") %>' MaxLength="4" />
                                </EditItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn HeaderText="Code List Name" DataField="CodeListName"
                                SortExpression="CodeListName" MaxLength="8" UniqueName="colName" />
                            <telerik:GridBoundColumn HeaderText="Code List Description" DataField="CodeListDescription"
                                MaxLength="16" UniqueName="colDescription" />
                            <telerik:GridEditCommandColumn HeaderText="Edit" HeaderStyle-HorizontalAlign="Center"
                                HeaderStyle-Width="65" ButtonType="ImageButton"
                                UniqueName="colEdit" ItemStyle-HorizontalAlign="Center" />
                            <telerik:GridClientDeleteColumn HeaderText="Delete" HeaderStyle-HorizontalAlign="Center"
                                HeaderStyle-Width="65" ConfirmText="Delete Code List?" ConfirmDialogType="RadWindow"
                                ConfirmTitle="Delete Code List" ButtonType="ImageButton" ItemStyle-HorizontalAlign="Center" />
                        </Columns>
                    </MasterTableView>

                </telerik:RadGrid>
            </telerik:RadAjaxPanel>

        </div>

    </form>
</body>
</html>

[Tsvetoslav]

Hello Bryan,

I ran your sample without the work-around client methods and the grid does not sort on ENTER. However, the item not being updated on ENTER being hit is implemented by design due to the existence of various scenarios in which there might be AutoPostback set to true for the various controls, some custom handling of the key pressed event, etc.

You can change this behavior by adding the following modification to the following grid's internal method:

            Telerik.Web.UI.RadGrid.prototype._canHandleKeyboardAction = function(e) {

                var keyCode = e.keyCode || e.charCode;

                if ((keyCode == 32 || keyCode == 13) && this.ClientSettings.KeyboardNavigationSettings.EnableKeyboardShortcuts) {
                    var target = Telerik.Web.UI.Grid.GetCurrentElement(e);
                    var isClientSelectCheckBox = (target.tagName.toLowerCase() == "input" &&
                                                      target.type.toLowerCase() == "checkbox" &&
                                                     (target.id && target.id.indexOf("SelectCheckBox") != -1));

                    if (target.tagName.toLowerCase() == "textarea") {
                        return false;
                    }
                }
                return true;
            }

I hope this helps.


Regards,
Tsvetoslav
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.

[momentum]

Hi, would it be possible to supply this code in VB? I am looking to have my insert/update submit when enter key pressed.

Thanks

Brian

[Princy]

Hello Brian,

You can make use of any of the following code conversion tools to convert necessary code snippets from vb to c# or vice versa:
Telerik code converter
conversion tool

Thanks
Princy.

[momentum]

Hi Princy, i have converted and had a look at the code and it is a little more complicated of a solution then I am looking for. Do you know how I can get information (ie binded data values) out of:

1) The row being dragged

2) The row above where the row was dropped (if not dropped at the top of the grid)

3) The row below where the row was dropped (if not dropped at the bottom of the grid)

Thanks