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

[Solved] Saving row by pressing Enter

2 Answers 158 Views

Grid

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

Chris asked on 24 Sep 2009, 01:51 PM

I've created a grid where I edit the data InPlace. The grid has just one editable column and when I press Enter/Return I want the row to save. This seems to be partly working without me having to code it but only if I am editing row 1 on the grid (or the add new line if inserting a new record). If I edit row 2 or more then it's not saving my row and instead just moves the focus to row 1 on the grid!

The grid is created entirely with code. Here it is...

default.aspx

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="AjaxLoadingPanel1"></telerik:RadAjaxManager> 
        
                <telerik:RadAjaxLoadingPanel id="AjaxLoadingPanel1" runat="server" ></telerik:RadAjaxLoadingPanel>   
        
                <telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager> 
        
                <div> 
        
                    <asp:Panel ID="pnlContent" runat="server">  
        
                    </asp:Panel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

default.aspx.vb

    
            Imports Telerik.Web.UI  
        
            Partial Public Class _Default  
        
                Inherits System.Web.UI.Page  
        
                Protected WithEvents grdCategories As New RadGrid  
        
                Protected WithEvents sqlDataSource As New SqlDataSource  
        
                Private Function CreateRadGridBoundColumn(ByVal Datafield As String, Optional ByVal Width As Integer = 0) As GridColumn  
        
                    Dim col As New GridBoundColumn  
        
                    With col  
        
                        .AllowSorting = True 
        
                        .DataField = Datafield  
        
                        .HeaderText = Datafield  
        
                        .UniqueName = Datafield  
        
                        If Width = 0 Then 
        
                            .HeaderStyle.Width = (Len(.HeaderText) * 8) + 32  
        
                        Else 
        
                            .HeaderStyle.Width = Width + 16  
        
                        End If 
        
                    End With 
        
                    Return col  
        
                End Function 
        
                Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init  
        
                    SetGridSettings()  
        
                End Sub 
        
                Private Sub grdCategories_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles grdCategories.ItemCreated  
        
                    If (TypeOf e.Item Is GridDataInsertItem AndAlso e.Item.IsInEditMode) Then 
        
                        Dim InsertItem As GridDataInsertItem = DirectCast(e.Item, GridDataInsertItem)  
        
                        Dim CategoryTextBox As TextBox = DirectCast(InsertItem("CategoryName").Controls(0), TextBox)  
        
                        CategoryTextBox.MaxLength = 25  
        
                        CategoryTextBox.Width = 450  
        
                        CategoryTextBox.Focus()  
        
                    ElseIf (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then 
        
                        Dim EditItem As GridEditableItem = DirectCast(e.Item, GridEditableItem)  
        
                        Dim CategoryTextBox As TextBox = DirectCast(EditItem("CategoryName").Controls(0), TextBox)  
        
                        CategoryTextBox.MaxLength = 25  
        
                        CategoryTextBox.Width = 450  
        
                        CategoryTextBox.Focus()  
        
                    End If 
        
                End Sub 
        
                Protected Sub SetGridSettings()  
        
                    With sqlDataSource  
        
                        .ID = "SqlDataSource" 
        
                        .ConnectionString = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString  
        
                        .SelectCommandType = SqlDataSourceCommandType.Text  
        
                        .SelectCommand = "SELECT CategoryID, CategoryName FROM Categories" 
        
                        .DeleteCommandType = SqlDataSourceCommandType.StoredProcedure  
        
                        .DeleteCommand = "DeleteCategory" 
        
                        .InsertCommandType = SqlDataSourceCommandType.StoredProcedure  
        
                        .InsertCommand = "InsertCategory" 
        
                        .UpdateCommandType = SqlDataSourceCommandType.StoredProcedure  
        
                        .UpdateCommand = "UpdateCategory" 
        
                        .InsertParameters.Add("CategoryName", TypeCode.String)  
        
                        .UpdateParameters.Add("CategoryName", TypeCode.String)  
        
                    End With 
        
                    pnlContent.Controls.Add(sqlDataSource)  
        
                    With grdCategories  
        
                        .ID = "grdCategories" 
        
                        .AllowSorting = True 
        
                        .DataSourceID = "SqlDataSource" 
        
                        .AllowAutomaticDeletes = True 
        
                        .AllowAutomaticInserts = True 
        
                        .AllowAutomaticUpdates = True 
        
                        .ShowStatusBar = True 
        
                        With .MasterTableView  
        
                            .AutoGenerateColumns = False 
        
                            .AllowMultiColumnSorting = False 
        
                            .EditMode = GridEditMode.InPlace  
        
                            .DataKeyNames = New String() {"CategoryID"}  
        
                            .DataSourceID = "SqlDataSource" 
        
                            .CommandItemDisplay = GridCommandItemDisplay.Top  
        
                            .TableLayout = GridTableLayout.Fixed  
        
                            .Width = New Unit(100, UnitType.Percentage)  
        
                            .Columns.Add(CreateRadGridBoundColumn("CategoryName", 450))  
        
                            Dim EditCommand As New GridEditCommandColumn  
        
                            With EditCommand  
        
                                .ButtonType = GridButtonColumnType.ImageButton  
        
                                .UniqueName = "EditCommandColumn" 
        
                                .HeaderStyle.Width = 50  
        
                            End With 
        
                            .Columns.Add(EditCommand)  
        
                            Dim DeleteButton As New GridButtonColumn  
        
                            With DeleteButton  
        
                                .HeaderStyle.Width = 35  
        
                                .CommandName = "Delete" 
        
                                .ButtonType = GridButtonColumnType.ImageButton  
        
                                .ConfirmDialogType = GridConfirmDialogType.RadWindow  
        
                                .ConfirmText = "Are you sure you wish to delete this category?" 
        
                                .ConfirmTitle = "Delete Category" 
        
                            End With 
        
                            .Columns.Add(DeleteButton)  
        
                        End With 
        
                    End With 
        
                    pnlContent.Controls.Add(grdCategories)  
        
                End Sub 
        
            End Class

Northwind sample script to create my stored procedures:

    
            USE Northwind  
        
            GO  
        
            if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[DeleteCategory]') and OBJECTPROPERTY(id, N'IsProcedure') = 1)  
        
            drop procedure [dbo].[DeleteCategory]  
        
            GO  
        
            if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[InsertCategory]') and OBJECTPROPERTY(id, N'IsProcedure') = 1)  
        
            drop procedure [dbo].[InsertCategory]  
        
            GO  
        
            if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[UpdateCategory]') and OBJECTPROPERTY(id, N'IsProcedure') = 1)  
        
            drop procedure [dbo].[UpdateCategory]  
        
            GO  
        
            CREATE PROCEDURE [DeleteCategory]  
        
                (@CategoryID    [int])  
        
            AS   
        
            DELETE [Northwind].[dbo].[Categories]   
        
            WHERE ([CategoryID]  = @CategoryID)  
        
            GO  
        
            CREATE PROCEDURE [InsertCategory]  
        
                (@CategoryName  [nvarchar](15))  
        
            AS   
        
            INSERT INTO [Northwind].[dbo].[Categories]   
        
                 ([CategoryName],  
        
                  [Description],  
        
                  [Picture])   
        
            VALUES   
        
                (@CategoryName,  
        
                 NULL,  
        
                 NULL)  
        
            GO  
        
            CREATE PROCEDURE [UpdateCategory]  
        
                (@CategoryID        [int],  
        
                 @CategoryName  [nvarchar](15))  
        
            AS   
        
            UPDATE [Northwind].[dbo].[Categories]   
        
            SET [CategoryName]   = @CategoryName   
        
            WHERE ([CategoryID]  = @CategoryID)  
        
            GO

Steps to reproduce (firstly make sure you've a connection to Northwind setup in Web.Config)
1. Click Edit on row 3
2. Change the text
3. Press Enter to try and save the row. You will see the cursor move to row 1 and the data will not be saved.

Thanks

2 Answers, 1 is accepted

Accepted

answered on 26 Sep 2009, 01:31 PM

Hello Chris,

In order to achieve your scenario, you should set the grid's ClientSettings.AllowKeyboardNavigation property to true and change the an internal method of the grid as follows:

    
                        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.

Best wishes,
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.