|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionImplementing Using this script, you can navigate HTML CodeBelow is the HTML code for the <asp:GridView ID="gridView" runat="server" AutoGenerateColumns="False"
OnRowCreated="gridView_RowCreated"
TabIndex="0" GridLines="Horizontal">
<Columns>
<asp:BoundField HeaderText="S#" DataField="sno">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</asp:BoundField>
<asp:BoundField HeaderText="Random No" DataField="rndno">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="Date" DataField="date">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
<asp:BoundField HeaderText="Time" DataField="time">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="100px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#FFE0C0" />
<HeaderStyle BackColor="#FF8000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFC080" />
</asp:GridView>
In this demo, the C# CodeBelow is the C# code of the if (e.Row.RowType == DataControlRowType.DataRow &&
(e.Row.RowState == DataControlRowState.Normal ||
e.Row.RowState == DataControlRowState.Alternate))
{
e.Row.TabIndex = -1;
e.Row.Attributes["onclick"] =
string.Format("javascript:SelectRow(this, {0});", e.Row.RowIndex);
e.Row.Attributes["onkeydown"] = "javascript:return SelectSibling(event);";
e.Row.Attributes["onselectstart"] = "javascript:return false;";
}
In the above code, first, it has been ensured that the row is either When trapping key events, it is important to prevent the browser from executing the default behavior of the keystroke. The common browser action resulting from a down/up arrow press is to scroll the document. If you wishes to trap the arrow keys and use them to change focus to a different The The JavaScript Code<script type="text/javascript">
var SelectedRow = null;
var SelectedRowIndex = null;
var UpperBound = null;
var LowerBound = null;
window.onload = function()
{
UpperBound = parseInt('<%= this.gridView.Rows.Count %>') - 1;
LowerBound = 0;
SelectedRowIndex = -1;
}
function SelectRow(CurrentRow, RowIndex)
{
if(SelectedRow == CurrentRow || RowIndex > UpperBound || RowIndex < LowerBound)
return;
if(SelectedRow != null)
{
SelectedRow.style.backgroundColor = SelectedRow.originalBackgroundColor;
SelectedRow.style.color = SelectedRow.originalForeColor;
}
if(CurrentRow != null)
{
CurrentRow.originalBackgroundColor = CurrentRow.style.backgroundColor;
CurrentRow.originalForeColor = CurrentRow.style.color;
CurrentRow.style.backgroundColor = '#DCFC5C';
CurrentRow.style.color = 'Black';
}
SelectedRow = CurrentRow;
SelectedRowIndex = RowIndex;
setTimeout("SelectedRow.focus();",0);
}
function SelectSibling(e)
{
var e = e ? e : window.event;
var KeyCode = e.which ? e.which : e.keyCode;
if(KeyCode == 40)
SelectRow(SelectedRow.nextSibling, SelectedRowIndex + 1);
else if(KeyCode == 38)
SelectRow(SelectedRow.previousSibling, SelectedRowIndex - 1);
return false;
}
</script>
In the above script, the global variables have been initialized in the ConclusionI have tried my best to make this code error free. Suggestions and criticism for further improvements of this code are most welcome. Browser CompatibilityI have tested this code on various browsers and it worked fine. The list of browsers along with versions is given below:
This code will not work currently on Opera (earlier version of 9.27), Safari, Firebox (as of 1.0), and older versions of Mozilla (1.7 and earlier) as some browsers don’t support the new capabilities like the
|
||||||||||||||||||||||