Key board Navigation in radgrid

[VR]

Hi,

I am having an issue with the rad grid with keyboard navigation. I am in trial version and new to Telerik. When I use the below code for the key board navigation ,the keys doesn't works. But it works when I remove the EnablePostBackOnRowClick but the grid is not populated.

ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true" >
<Selecting AllowRowSelect="true" /> 
<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

Thanks,

Sindhu

[Maria Ilieva]

Hi ,

The KeyBoardNavigation functionality is supported only with disabled post back on row click. Therefore the mentioned property should be set to false. Can you please let me know what the exact configuration of your RadGrid control is so that we can revise the issue you are facing with its binding?

Regards,
Maria Ilieva
Telerik

[VR]

Hi Maria.

Please find the below code. Row click by mouse it works whereas Key board navigation it doesn't populate the records. Also I find the delay in populating the record on each click of the row,

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" MaintainScrollPositionOnPostback="True"
CodeBehind="LeaveEntry.aspx.cs" Inherits="Leave_Application.LeaveEntry" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI"
TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.HeaderFreez
{
position:relative;
top:8px;
z-index: 10;
left: 0px;
height: 205px;
width: 188px;
}


#HeaderDiv
{
height: 312px;
}
.headerGrid
{
font-weight:bold;
position:absolute;
background-color:White;
}

.headerGridAccrual
{
font-weight:bold;
position:absolute;
background-color:White;
}
.style1
{
width: 825px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"
EnableScriptCombine="false"> </telerik:RadScriptManager>
<telerik:RadCodeBlock id="RadCodeBlock1" runat="server">
<script type="text/javascript" language="javascript">
function keyPress(sender, args) {
if (args.get_keyCode() == 13) {
args.set_cancel(true);
if (sender._activeRow) {
sender._activeRow.click();
}
}
}

function adjustDropDown(sender, args) {
if (!$telerik.isIE)
sender.set_offsetY(document.documentElement.scrollTop);
}
function Onscrollfnction() {
var div = document.getElementById('DataDiv');
var div2 = document.getElementById('HeaderDiv');
div2.scrollLeft = div.scrollLeft;
return false;
}
function Onscrollfnction1() {
var div = document.getElementById('DataDiv1');
var div2 = document.getElementById('HeaderDiv1');
div2.scrollLeft = div.scrollLeft;
return false;
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 46 || charCode > 57))
return false;
return true;
}
function pageLoad() {
var grid = $find("<%=RdGrdEmpl.ClientID%>");
grid.get_element().focus();
if (grid.get_selectedItems().length) {
grid.set_activeRow(grid.get_selectedItems()[0].get_element());
}
}
var scrollTop;
function OnRowSelected(sender, args) {
// var mailID = args.getDataKeyValue("EID");
// var actionCount = $get('<%=HiddenField1.ClientID %>').value;
// actionCount = mailID;
$get('<%=HiddenField1.ClientID %>').value = args.getDataKeyValue("EID"); ;
//var hidden = document.getElementById('hdnEID').value;
var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest
("Selected");
// var grid = sender;
// var MasterTable = grid.get_masterTableView();
// var row = MasterTable.get_dataItems()
[args.get_itemIndexHierarchical()];
// var cell = MasterTable.getCellByColumnUniqueName(row, "eid");
}
</script>
</telerik:RadCodeBlock>
<div style="height: 511px">
<table>
<tr>
<td>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
OnAjaxRequest="RadAjaxManager1_AjaxRequest" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RdGrdEmpl">
<UpdatedControls>
<telerik:AjaxUpdatedControl
ControlID="RdGrdEmpl"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="grdAirTkt" />
</UpdatedControls>
</telerik:AjaxSetting>

</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RdGrdEmpl" runat="server" CellSpacing="-1" GridLines="Both"
GroupPanelPosition="Top" IsExporting="False"
AllowSorting="True"
Skin="Windows7" AllowFilteringByColumn="True" Width="250px"
EnableLinqExpressions="False"
OnNeedDataSource="RdGrdEmpl_NeedDataSource"
OnSelectedIndexChanged="RdGrdEmpl_SelectedIndexChanged"
Height="495px" >
<MasterTableView TableLayout="Fixed"
AutoGenerateColumns="False" DataKeyNames="EID" ClientDataKeyNames="EID">
<Columns>
<telerik:GridBoundColumn DataField="EID" HeaderText="EID"
FilterControlAltText="Filter EID column" UniqueName="EID"
ShowFilterIcon="true" AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" ItemStyle-Width="0px" ItemStyle-Font-Size="XX-Small" ItemStyle-Font-Names="Calibri" FilterControlWidth="40px" HeaderStyle-Width="40px" HeaderStyle-Font-Size="XX-Small" HeaderStyle-Font-Names="Calibri">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Ename" HeaderText="ENAME"
FilterControlAltText="Filter Ename column" ShowFilterIcon="true"
AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ItemStyle-Width="0px" ItemStyle-Font-Size="XX-Small"
ItemStyle-Font-Names="Calibri" FilterControlWidth="80px" HeaderStyle-Width="80px" HeaderStyle-Font-Size="XX-Small"
HeaderStyle-Font-Names="Calibri">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView >
<ClientSettings AllowKeyboardNavigation="true" Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true" >
<ClientEvents OnRowSelected="OnRowSelected" />
<Selecting AllowRowSelect="True" />
<KeyboardNavigationSettings AllowActiveRowCycle="True"
EnableKeyboardShortcuts="true"></KeyboardNavigationSettings>
<Scrolling AllowScroll="True" />
</ClientSettings>
</telerik:RadGrid>
</td>
<td class="style1">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
MultiPageID="RadMultiPage1" Skin="Outlook" SelectedIndex="0"
>
<Tabs>
<telerik:RadTab runat="server" PageViewID="PageView1" Text="Leave
Entry"
Selected="True" TabIndex="0">
</telerik:RadTab>
<telerik:RadTab runat="server" PageViewID="PageView2" Text="Leave
Posting" TabIndex="1">
</telerik:RadTab >
<telerik:RadTab runat="server" PageViewID="PageView3" Text="Air Ticket"
TabIndex="2">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server"
SelectedIndex="0"
Style="border: 1px solid #898c95; margin-top: 0px; margin-left: 0px;"
Height="451px" Width="785px">
<telerik:RadPageView ID="PageView1" runat="server">
<table>
<tr>
<td>Signature:</td>
<td><asp:TextBox ID="signatureText" runat="server" /></td>
</tr>
<tr>
<td>Bio:</td>
<td><asp:TextBox ID="bioText" runat="server" /></td>
</tr>
</table>
<br /><br />
Hit Save to cause a postback from an update panel inside the tab
panel.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</telerik:RadPageView>
<telerik:RadPageView ID="PageView2" runat="server">
<table>
<tr>
<td>Signature:</td>
</tr>
</table>
</telerik:RadPageView>
<telerik:RadPageView ID="PageView3" runat="server">
<table>
<tr>
<td>
<telerik:RadGrid ID="grdAirTkt" runat="server" CellSpacing="-1"
GridLines="Both"
GroupPanelPosition="Top" IsExporting="False"
AllowSorting="True"
Skin="Windows7" Visible="true" >
<MasterTableView TableLayout="Fixed" AutoGenerateColumns="False" >
<Columns>
<telerik:GridBoundColumn DataField="Relation" HeaderText="RELATION"
FilterControlAltText="Filter Relation column"
UniqueName="Relation">
<HeaderStyle Font-Bold="True" Font-Names="Calibri"
Font-Size="X-Small" Width="35px" BackColor="#5D7B9D"
ForeColor="White"/>
<ItemStyle Font-Names="Calibri" Font-Size="XX-Small" Height="0px"
Width="35px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EntlYr" HeaderText="ENTLYR"
FilterControlAltText="Filter EntlYr column" UniqueName="EntlYr">
<HeaderStyle Font-Bold="True" Font-Names="Calibri"
Font-Size="X-Small" Width="36px" BackColor="#5D7B9D"
ForeColor="White" />
<ItemStyle Font-Names="Calibri" Font-Size="XX-Small" Height="0px"
Width="36px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="AmountMST" HeaderText="AMOUNTMST"
DataFormatString="{0:f2}"
FilterControlAltText="Filter AmountMST column"
UniqueName="AmountMST">
<HeaderStyle Font-Bold="True" Font-Names="Calibri"
Font-Size="XX-Small" Width="44px" BackColor="#5D7B9D" ForeColor="White" />
<ItemStyle Font-Names="Calibri" Font-Size="X-Small" Height="0px"
HorizontalAlign="Right" Width="44px" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="txt" HeaderText="TXT"
FilterControlAltText="Filter txt column" UniqueName="txt">
<HeaderStyle Font-Bold="True" Font-Names="Calibri"
Font-Size="XX-Small" Width="400px" BackColor="#5D7B9D" ForeColor="White"
/>
<ItemStyle Font-Names="Calibri" Font-Size="X-Small" Height="0px"
Width="400px" />
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings EnablePostBackOnRowClick="true">
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<GroupingSettings CollapseAllTooltip="Collapse all groups" />
</telerik:RadGrid>
</td>
</tr>
</table>
</telerik:RadPageView>
</telerik:RadMultiPage>
</td>
</tr>
</table>
</div>
<asp:HiddenField id="HiddenField1" runat="server" />
<input id="hdnEID" type="hidden" runat="server" />
<input id="hdntxtEntity" type="hidden" runat="server" />
<%--<input id="hdnCheckBx1" type="hidden" runat="server" />--%>
<input id="hdnGrdCheckBx1" type="hidden" runat="server" />
<input id="hdnStartDt" type="hidden" runat="server" />
<input id="hdnStartTxtBox" type="hidden" runat="server" />
<input id="hdntotal" type="hidden" runat="server" />
<input id="hdnEndDt" type="hidden" runat="server" />
<input id="hdnNote" type="hidden" runat="server" />
<%--<input id="hdnVal" type="hidden" runat="server" />--%>
<input type="hidden" id="hScrollTop" runat="server"/>
<input id="hdnUserEid" type="hidden" runat="server" />
<input id="hdnAttendannualCash" type="hidden" runat="server" />
</asp:Content>
<%--<div style ="height:22px; width:646px; margin:0;padding:0; font-size: x-small; font-
family: Calibri; font-weight: bold;
background-color: #5D7B9D; color: #FFFFFF;"
>
<table cellspacing="0" cellpadding = "0" border="1" id="Table2"
style="width:646px;border-collapse:collapse;height:22px;"><tr><td style ="text-
align:center; font-weight:bold; " width="40px">&nbsp;&nbsp;</td><td style ="text-
align:center;font-weight: bold; font-family: Calibri; font-size: x-small;"
width="60px">Post</td><td style ="text-align:center; font-weight: bold;
font-family: Calibri; font-size: x-small;"
width="60px">Void</td><td style ="text-align:center; font-weight:bold; font-
family: Calibri; font-size: x-small;"
width="130px">From</td><td style ="text-align:center;font-weight: bold;
font-family: Calibri; font-size: x-small;"
width="100px" >To</td><td style ="text-align:center; font-weight: bold;
font-family: Calibri; font-size: x-small;"
width="50px" >Type</td><td style ="text-align:center; font-weight:bold; font-
family: Calibri; font-size: x-small;"
width="40px" >Days</td><td style ="text-align:center; font-weight:bold;
font-family: Calibri; font-size: x-small;"
width="40px" >Holi</td><td style ="text-align:center;font-weight: bold; font-
family: Calibri; font-size: x-small;"
width="40px" >Status</td><td style ="text-align:center; font-weight:
bold; font-family: Calibri; font-size: x-small;"
width="40px" >Annu</td><td style ="text-align:center; font-weight: bold;
font-family: Calibri; font-size: x-small;"
width="100px" >Remarks</td></tr></table></div>--%>
<%-- <table cellspacing="0" cellpadding = "0" border="1" id="Table1"
style="width:154px; border-collapse:collapse;height:22px;"><tr>
<td class="style7"></td><td style ="text-align:center; font-
weight:bold;"
class="style4">Period</td>
<td style ="text-align:center;font-weight: bold; font-family:
Calibri; font-size: x-small;"
class="style5">Type</td>
<td style ="text-align:center; font-weight: bold; font-family:
Calibri; font-size: x-small;"
class="style4" >Days</td></tr></table>
<div style ="height:22px; width:153px; margin:0;padding:0; font-size: x-small; font-
family: Calibri; font-weight: bold; background-color: #5D7B9D; color: #FFFFFF;">
</div>
<asp:CheckBox ID="chkSelect" runat="server"
AutoPostBack="true"
OnCheckedChanged="chkSelect_CheckedChanged" onclick ="CheckOne
(this)" />
--%>

 

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;
using Telerik.Web.UI;
namespace Leave_Application
{
public partial class LeaveEntry : System.Web.UI.Page
{
DateTime startDate;
DateTime startDate1;
DateTime startDate2;
TextBox txtGrdStartDT;
TextBox txtGrdEndDT;
string id;
int daysgrd;
decimal totalGVCurrent = 0;
decimal totalGVCurrentAnnual = 0;
string EnddtPer;
decimal total = 0;
int perdchk = 0;
int days;
string val;
decimal holupdt;
int caln;
int notn;
DateTime calGrdCalend;
DateTime calGrdCalend1;
int attendannualCash;
protected void Page_Load(object sender, EventArgs e)
{
string eventTarget = Request["__EVENTTARGET"] ?? string.Empty;
string eventArgument = Request["__EVENTARGUMENT"] ?? string.Empty;
switch (eventTarget)
{

case "MyConfirmationPostBackEventTarget":
if (Convert.ToBoolean(eventArgument))
{
}
break;
}
if (!IsPostBack)
{
//if (Request.QueryString["Entity"] != null)
// hdntxtEntity.Value = Request.QueryString["Entity"];
// if (Request.QueryString["Name"] != null)
// hdnUserEid.Value = Request.QueryString["Name"];
if (Request.QueryString["EID"] != null)
hdnEID.Value = Request.QueryString["EID"];
hdntxtEntity.Value = "cae";
hdnUserEid.Value = "E003125";
//BindToDataTable(RadComboBox1);
PopulateddlEID();
RadTabStrip1.SelectedIndex = 2;
RadMultiPage1.SelectedIndex = 2;
}

}


public void PopulateddlEID()
{
//
string strConnection = ConfigurationManager.ConnectionStrings
["LVConectString"].ConnectionString;
SqlConnection sqlcon = new SqlConnection(strConnection);
try
{
SqlCommand sqlcmd = new SqlCommand();
sqlcmd = new SqlCommand("LvWEmp", sqlcon);
sqlcmd.CommandType = CommandType.StoredProcedure;
sqlcmd.Parameters.Add("@Ref", SqlDbType.VarChar).Value = "02";
sqlcmd.Parameters.Add("@Entity", SqlDbType.VarChar).Value = hdntxtEntity.Value;
SqlDataAdapter sda = new SqlDataAdapter(sqlcmd);
DataTable dt = new DataTable();
sda.Fill(dt);
Session["dtRcbEmpl"] = dt;
// RcbEmpl.DataSource = dt;
//RcbEmpl.DataValueField = "EID";
//RcbEmpl.DataTextField = "EName";
//RcbEmpl.DataBind();
RdGrdEmpl.DataSource = dt;
RdGrdEmpl.DataBind();
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
}
finally
{
}
}


public void BindGridView()
{
string strConnection = ConfigurationManager.ConnectionStrings
["LVConectString"].ConnectionString;
SqlConnection sqlcon = new SqlConnection(strConnection);
try
{
sqlcon.Open();
SqlCommand sqlcmd = new SqlCommand();
sqlcmd = new SqlCommand("LvWstat1", sqlcon);
// hdnYr.Value = lstYear.SelectedValue;
sqlcmd.CommandType = CommandType.StoredProcedure;
// sqlcmd.Parameters.Add("@EID", SqlDbType.VarChar).Value = RcbEmpl.SelectedItem.Value;
sqlcmd.Parameters.Add("@Entity", SqlDbType.VarChar).Value =
hdntxtEntity.Value;
// sqlcmd.Parameters.Add("@Yr", SqlDbType.VarChar).Value = ddlYR.SelectedValue;
sqlcmd.Parameters.Add("@Ref", SqlDbType.VarChar).Value = "01";

SqlDataAdapter sda = new SqlDataAdapter(sqlcmd);
DataTable dt = new DataTable();
sda.Fill(dt);
if (dt.Rows.Count > 0)
{
// GVAccrual.Visible = true;
// GVAccrual.DataSource = dt;
// GVAccrual.DataBind();
}
else
{
// GVAccrual.Visible = false;
}

if (dt.Rows.Count < 5)
{
DataRow dr = null;
for (int i = 0; i <= 5 - dt.Rows.Count; i++)
{
dt.Rows.Add(new object[] { });
}
}
// GVAccrual.DataSource = dt;
}
catch (Exception ex)
{
Console.WriteLine(ex.ToString());
}
finally
{
sqlcon.Close();
sqlcon.Dispose();
}
}
protected void RdGrdEmpl_NeedDataSource(object sender,
Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
// PopulateddlEID();
}

protected void RdGrdEmpl_SelectedIndexChanged(object sender, EventArgs e)
{
GridDataItem item = (GridDataItem)RdGrdEmpl.SelectedItems[0];
HiddenField1.Value = item["EID"].Text.ToString();
BindgrdAirTkt1();

}


protected void RadAjaxManager1_AjaxRequest(object sender,
AjaxRequestEventArgs e)
{
//if (e.Argument == "Selected")
//{
//}
}

public void BindgrdAirTkt1()
{
this.grdAirTkt.MasterTableView.AutoGenerateColumns = false;
// string strcnc = "server=cae-appsrv02;database=cae_AX2009_Prod;uid=RprtLogin;pwd=rptPassw0rd;";
string strcnc = ConfigurationManager.ConnectionStrings
["AXConectString"].ConnectionString;
SqlConnection sqlcon = new SqlConnection(strcnc);
try
{
sqlcon.Open();
SqlCommand sqlc = new SqlCommand("CAE_RPT_Z3", sqlcon);
sqlc.CommandType = CommandType.StoredProcedure;
sqlc.Parameters.Add("@Par1", SqlDbType.VarChar).Value =
hdntxtEntity.Value;
sqlc.Parameters.Add("@Par2", SqlDbType.VarChar).Value =
HiddenField1.Value;
sqlc.Parameters.Add("@Par3", SqlDbType.VarChar).Value = "Z302";
SqlDataAdapter sda = new SqlDataAdapter(sqlc);
DataSet dt = new DataSet();
sda.Fill(dt);
grdAirTkt.DataSource = dt;
grdAirTkt.DataBind();
}
catch
{
}
finally
{
}


}







}
}

 

 

 

[VR]

Hi Maria,

Thanks for the reply.Please find the attached file. Row click postback is working whereas the key board navigation doesn't populate the records. Also I found that the record which bind and populate in the grid on click of each row ,there is a delay in it. Not sure the

[Maria Ilieva]

Hello,

Can you please disable the ajax on the page and see if this makes any difference? Also see if any errors appear on the page when trying to populate the grid.

Regards,
Maria Ilieva
Telerik

[VR]

Hi,

I removed the ajax functionality but still the keyboard navigation doesn't works. There are no errors appearing on the screen .Keyboard navigates but it doesn't populate records.

Thanks

[Maria Ilieva]

Hello,

As I mentioned in the other ticket you have opened for the same issue using PostBackOnRowClick is not supported with KeyBoardNavigation enabled. I noticed that you have three tickets opened for this case.

Please avoid opening duplicate tickets so that we can easily track your case. I would suggest you to refer to Ticket ID: 1020732 where my colleague has explained possible solution for your case. If further questions arise post them in this ticket so that we have all the information in one place and provide the best support for your case.


Regards,
Maria Ilieva
Telerik