एरो कीज़ - asp.net, jquery-ui, jquery, jquery-plugins का उपयोग करके नेविगेट करें

मैं इस Gridview का उपयोग कर रहा हूँ

http://gridviewscroll.aspcity.idv.tw/Demo/Style.aspx#StyleCustom2

क्या कोई मुझे बता सकता है कि मैं ग्रिड ग्रिड में एरो कीज़ का उपयोग करके ग्रिड व्यू में कैसे नेविगेट कर सकता हूं

धन्यवाद :)

उत्तर:

1. ग्रिडव्यू के साथ वेबफॉर्म को संपादित करें जिसे आप फ़ंक्शन के साथ विस्तारित करना चाहते हैं। वहां, दो बटन जोड़ें। बटनअप और बटनडाउन।

2. बटन के लिए निम्न क्लिक-ईवेंट जोड़ें। मुझे लगता है कि आपके GridView को GridView1 कहा जाता है:

               protected void ButtonUp_Click(object sender, EventArgs e) {
   int i = GridView1.SelectedIndex;
   if(i>0)
   GridView1.SelectedIndex = GridView1.SelectedIndex - 1;
   }
   
   protected void ButtonDown_Click(object sender, EventArgs e) {
   int i = GridView1.SelectedIndex;
   if (i < GridView1.Rows.Count - 1)
   GridView1.SelectedIndex = GridView1.SelectedIndex + 1;
   }
   

3. यदि आप अपना पेज अब चलाते हैं, तो आप सक्षम हैंपृष्ठ पर मौजूद बटन के साथ ग्रिड व्यू के माध्यम से नेविगेट करें। अब, हम जावास्क्रिप्ट के माध्यम से अपने कीबोर्ड पर बटन क्लिक को बांधेंगे। निम्न कोड को Page_Load ईवेंट में जोड़ें:

                   ClientScript.RegisterClientScriptBlock(typeof(string), "keyScript",
   @"function move(e) {
   var key = 0;
   if(window.event)
   key = event.keyCode;
   else
   key = e.keyCode;
   if(key == 38)
   document.getElementById("ButtonUp").click();
   if(key == 40)
   document.getElementById("ButtonDown").click();
   }
   document.onkeydown=move;
   ", true);
   

4. अब आपको अपने कीबोर्ड को अप और डाउन कीज के साथ नाविक करने में सक्षम होना चाहिए।

5. पृष्ठ बटन को अदृश्य बनाने के लिए, उनके लिए निम्नलिखित CssClass बनाएं:

   .Invisible {
   display:none;
   }
   

<script type="text/javascript">
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which;
var arrow = { left: 37, up: 38, right: 39, down: 40 };
switch (keyCode) {
case arrow.left:
break;
case arrow.up:
document.getElementById(("<%= ButtonUp.ClientID %>")).click();
break;
case arrow.right:
break;
case arrow.down:
//alert("down");
document.getElementById(("<%= ButtonDown.ClientID %>")).click();
break;
}
});
</script>