javascript - how to navigate (up or down) in ASP.NET gridview using arrow keys? -

javascript - how to navigate (up or down) in ASP.NET gridview using arrow keys? -

hhow navigate (up or down) in asp.net gridview using arrow keys whicle highlighting current row?

i able move through rows , downwards arrow keys using javascript code , c# code. implemented begin request , end request js code maintaining scroll position on postback.

however, problem is, scrollbar doesn't move or downwards show highlighted row automatically. suppose 100 rows, select 15th row, grid height can show 10 rows, unless move scroll bar manually, doesn't move automatically display selected row via arrow keys. how ensure synchronous or visibility of highlighted row moving scroll bar?

my gridview doesn't have checkbox.

please help me. code here:

<asp:gridview id="gvcycles" runat="server" autogeneratecolumns="false" cssclass="grid" allowsorting="true" showheader="false" showfooter="true" onselectedindexchanged="gvdeductionlist_selectedindexchanged" onrowdatabound="gvdeductionlist_rowdatabound" datakeynames="cycleid" onselectedindexchanging="gvcycles_selectedindexchanging" > <columns> <asp:boundfield datafield="cycleid" headertext="cycleid" htmlencode="false" sortexpression="cycleid"> <itemstyle cssclass="gridviewhiddencolumn" /> </asp:boundfield>

what did maintain scroll position on postback is:

<script language="javascript" type="text/javascript"> // script used maintain grid scroll on partial postback var scrolltop; //register begin request , end request sys.webforms.pagerequestmanager.getinstance().add_beginrequest(beginrequesthandler); sys.webforms.pagerequestmanager.getinstance().add_endrequest(endrequesthandler); //get div scroll position function beginrequesthandler(sender, args) { var m = document.getelementbyid('divgrid'); scrolltop = m.scrolltop; } //set div scroll position function endrequesthandler(sender, args) { var m = document.getelementbyid('divgrid'); m.scrolltop = scrolltop; } </script>

also, have in keydown , keyup

if (e.keycode == '38') { document.getelementbyid('<%= controlcapture.clientid %>').value = false; document.getelementbyid('<%= shiftcapture.clientid %>').value = false; // arrow __dopostback(pageid, "up"); } else if (e.keycode == '40') { document.getelementbyid('<%= controlcapture.clientid %>').value = false; document.getelementbyid('<%= shiftcapture.clientid %>').value = false; // downwards arrow __dopostback(pageid, "down");

question: not know utilize code mentioned in codeproject such that, when press key downwards or arrow keys, should move scroll bar automatically. not have pagination.

page_load code

protected void page_load(object sender, eventargs e) { if (!ispostback) //on initial load, default dates current fbt year { dpdatefrom.datevalue = currentbt; dpdateto.datevalue = currentbtend; searchclick(); } //cursor keys else if (request.form["__eventargument"] == "up" || request.form["__eventargument"] == "down") { string eventargument = request.form["__eventargument"]; int intpaycycleid = 0; if (gvcycles.selectedindex >= 0 && gvcycles.selectedindex < gvcycles.rows.count) { if (eventargument == "down") { if (gvcycles.selectedindex < gvcycles.rows.count-1) { gvcycles.selectedindex += 1; } } else if (eventargument == "up") { if (gvcycles.selectedindex > 0) { gvcycles.selectedindex -= 1; } } hdnselectedrow.value = gvcycles.selectedvalue.tostring() + ","; //assign hidden value selected row setrowsstyle(gvcycles); if (int.tryparse(gvcycles.selectedrow.cells[0].text, out intcycleid)) { showdeductions(intcycleid, false); } } } }

have @ so thread

and, here's great sample code

update

i had @ code here. auto scrolling works fine if wrap gridview div shown below. (i'm using same code given in this link , added div css style. increased no of records displayed in grid changing for loop in code behind n < 100)

<div class="scrollable"> <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> </div>

and, here's css

<style type="text/css"> .scrollable { height: 460px; width: 100%; overflow: auto; border: 0; } </style>

update 2

comment javascript code (it has __dopostback, postback , causes scroll bar misbehave)

comment else if section of page_load event, we'll not using since commented js code

now add together next code page

javascript

<script type="text/javascript"> var selectedrow = null; var selectedrowindex = null; var upperbound = null; var lowerbound = null; window.onload = function() { upperbound = parseint('<%= this.gvcycles.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); homecoming false; } </script>

code behind

protected void gvcycles_rowcreated(object sender, gridviewroweventargs e) { 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;"; } }

hope helps.

javascript c# jquery asp.net gridview