[Solved] Enter in place of space in allowkeyboardnavigation

[mangesh unde]

Hi,
I have created a grid at runtime and have set properties as follows:

 

 

MainGrid.ClientSettings.AllowKeyboardNavigation = true;

MainGrid.ClientSettings.Selecting.AllowRowSelect = true;

MainGrid.ClientSettings.ClientEvents.OnRowSelected = "OnRowSelected";

<script type="text/javascript" language="javascript">

function OnRowSelected(sender, args)
{
//My code
}
</script>

 

 

this code works perfectly fine when i use 'SPACE' key for selecttion
I dont want 'ENTER' key to get into Edit mode instead what i want is to use 'ENTER' key for selection
What this means is,whatever currently happening using 'SPACE' bar it should happen on pressing 'ENTER' key

Regards,
Mangesh

[mangesh unde]

I have tried this following piece of code to prevent default behaviour of 'ENTER' key
but i am getting no value for 'args'
I am creating grid dynamically at runtime

//CS Page

MainGrid.ClientSettings.ClientEvents.OnKeyPress = "keyPressed";

//ASPX page         function preventDefaultBehaviour(e)

{

e.cancelBubble = true;

e.returnValue = false;

if (e.preventDefault)

e.preventDefault();

if (e.stopPropagation)

e.stopPropagation();

}

function keyPressed(sender, args)

{

var e = args || window.event;

if (e.keyCode == 13)

{

preventDefaultBehaviour(e);

}

}

[Yavor]

Hello mangesh,

Can you please post the code, which is used to generate the grid control. There may be a discrepancy in the way it is created or databound.

Greetings,
Yavor
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.

[mangesh unde]

Hi,
I am really very sorry for the late reply.
As I have mentioned before i am creating grid at runtime. Code is as below:

protected   void Page_Init(object sender, EventArgs e)   {   BindGridData();           } private void BindGridData()

{

this.MainGrid = new RadGrid();

MainGrid.ID = "MainGrid";

MainGrid.NeedDataSource += new GridNeedDataSourceEventHandler(MainGrid_NeedDataSource);

MainGrid.ClientSettings.AllowKeyboardNavigation = true;

MainGrid.ClientSettings.Selecting.AllowRowSelect = true;

MainGrid.ClientSettings.ClientEvents.OnRowSelected = "OnRowSelected";

MainGrid.ClientSettings.ClientEvents.OnKeyPress = "keyPressed";

MainGrid.ItemDataBound += new GridItemEventHandler(MainGrid_ItemDataBound);

MainGrid.ItemCommand += new GridCommandEventHandler(MainGrid_ItemCommand);

MainGrid.DataBound += new EventHandler(MainGrid_DataBound);

MainGrid.PageIndexChanged += new GridPageChangedEventHandler(MainGrid_PageIndexChanged);

MainGrid.SortCommand += new GridSortCommandEventHandler(MainGrid_SortCommand);

MainGrid.EnableViewState = true;

MainGrid.MasterTableView.PageSize = 10;

MainGrid.SkinsPath = "~/RadControls/Grid/Skins";

MainGrid.Skin = "WebBlue";

MainGrid.UseEmbeddedScripts = false;

MainGrid.EnableAJAX = false;

MainGrid.EnableAJAXLoadingTemplate = false;

MainGrid.Width = Unit.Percentage(98);

MainGrid.AllowPaging = true;

MainGrid.AllowSorting = true;

MainGrid.AutoGenerateColumns = false;

MainGrid.AllowMultiRowSelection = false;

}

 

[Yavor]

Hello mangesh,

I reviewed the code, and it looks correct. If the issue persists, you can open a formal support ticket, and send us a small working project, demonstrating your setup, and showing the unwanted behavior.
We will debug it locally, and get back to you with additional information on the matter.

All the best,
Yavor
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.

[mangesh unde]

Hi,

Thanks for your support on this.But my question is:

MainGrid.ClientSettings.AllowKeyboardNavigation = true;

MainGrid.ClientSettings.Selecting.AllowRowSelect = true;

when I use these properies it allows me to navigate through records on key up ,key down & selects particular record when i hit 'SPACE' bar on it.
What i want is same functionality(Selecting record) should work for 'ENTER' key as well,which is currently working as edit event

Regards,
Mangesh

[Yavor]

Hello mangesh,

In this case, you can attach to the onKeyPress client side handler, and detect when the enter key press is fired. When this is the case, you can cancel out the default action, and select the item, instead of editing it. I hope this is a suitable approach for you.

Greetings,
Yavor
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.

[mangesh unde]

Hi,

I got your point but can you please explain this in detail
means how can I cancel the default behavior of enter key press & make it work the way I want

Regards,
Mangesh

[Tsvetoslav]

Hello mangesh,

Attached is a small sample that demonstrates your scenario.

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.

[mangesh unde]

Hi,

I used this code in my application.
As I am calling clientside events from code behind page (aspx.cs)  like:

MainGrid.ClientSettings.AllowKeyboardNavigation = true;
MainGrid.ClientSettings.Selecting.AllowRowSelect = true;
MainGrid.ClientSettings.ClientEvents.OnRowSelecting = "rowDeselecting";
MainGrid.ClientSettings.ClientEvents.OnRowDeselecting = "rowDeselecting";
MainGrid.ClientSettings.ClientEvents.OnKeyPress = "onKeyPressed";
MainGrid.ClientSettings.ClientEvents.OnRowSelected = "OnRowSelected";

ASPX page:

function onKeyPressed(sender, args)
    {
    alert(args);
    if (args.get_keyCode() == 13)
    {
        args.set_cancel(true);
        selectedIndexes.push(lastIndex);
    }

    }

    function rowSelecting(sender, args)
    {
        alert('row selecting');
        lastIndex = args.get_itemIndexHierarchical();
        alert(lastIndex);
    }

    function rowDeselecting(sender, args)
    {
        alert('row deselecting');
        var index = args.get_itemIndexHierarchical();
        alert(index);
        for(var i=0; i < selectedIndexes.length; i++)
        {
            if (selectedIndexes[i] == index)
            {
                args.set_cancel(true);
            }
        }
    }

on keypress it gives me error like 'args is undefined' or 'undefined is null'
It will be great if you help me with this

Regards,
Mangesh

[Tsvetoslav]

Hello mangesh,

I could not reproduce the problem you describe, as demonstrated by the modified version of my sample attached to this post. Please, take a look at it and get back to us with the result.

All the best,
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.

[mangesh unde]

Hi,

I have created same project as yours.
But I am still getting error at 'args'.
Please let me know where I am going wrong.

Regards,
mangesh

aspx Page:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="radG" %>

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">

            var selectedIndexes = [];
            var lastIndex;

            function onKeyPressed(sender, args)
            {
                alert(args);
                if (args.get_keyCode() == 13)
                {
                    args.set_cancel(true);
                    selectedIndexes.push(lastIndex);
                }

            }

            function rowSelecting(sender, args)
            {
                lastIndex = args.get_itemIndexHierarchical();
            }

            function rowDeselecting(sender, args)
            {
                var index = args.get_itemIndexHierarchical();

                for(var i=0; i < selectedIndexes.length; i++)
                {
                    if (selectedIndexes[i] == index)
                    {
                        args.set_cancel(true);
                    }
                }
            }

        </script>
    <radG:RadGrid ID="RadGrid1" AllowMultiRowSelection="True" Visible="true" runat="server" EnableLinqExpressions="false"
        DataSourceID="SqlDataSource2" GridLines="None">
        <MasterTableView AutoGenerateColumns="False" AllowFilteringByColumn="True" AllowSorting="True"
            AllowPaging="True" DataSourceID="SqlDataSource2">
            <RowIndicatorColumn Visible="False">
                <HeaderStyle Width="20px" />
            </RowIndicatorColumn>
            <ExpandCollapseColumn Visible="False">
                <HeaderStyle Width="19px" />
            </ExpandCollapseColumn>
            <Columns>
                <radG:GridBoundColumn DataField="EmployeeID" DataType="System.Int32" HeaderText="EmployeeID"
                    SortExpression="EmployeeID" UniqueName="EmployeeID">
                </radG:GridBoundColumn>
                <radG:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"
                    UniqueName="LastName">
                </radG:GridBoundColumn>
                <radG:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"
                    UniqueName="FirstName">
                </radG:GridBoundColumn>
                <radG:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City" UniqueName="City">
                </radG:GridBoundColumn>
                <radG:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country"
                    UniqueName="Country">
                </radG:GridBoundColumn>
                <radG:GridBoundColumn DataField="BirthDate" DataType="System.DateTime" HeaderText="BirthDate"
                    SortExpression="BirthDate" UniqueName="BirthDate">
                </radG:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowKeyboardNavigation="True">
            <ClientEvents OnRowDeselecting="rowDeselecting" OnRowSelecting="rowSelecting"
                OnKeyPress="onKeyPressed" />
            <Selecting AllowRowSelect="True" />
        </ClientSettings>
    </radG:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:medicalConnectionString %>"
        SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [City], [Country], [BirthDate] FROM [Employees]">
    </asp:SqlDataSource>
        &nbsp;
    </form>
</body>
</html>

[Tsvetoslav]

Hello mangesh,

I noticed that you are using the classic version of the controls. Please, update to the latest version of RadControls for ASP.NET AJAX. Do note the difference in the referenced assemblies in my sample and in your project.

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.