PDA

View Full Version : Ext.NET DataView with KeyNav Support (Improved)



NickBin
Dec 05, 2011, 7:53 AM
With reference to the following post

http://forums.ext.net/showthread.php?16204-Ext-NET-DataView-with-KeyNav-Support

here is an improved version of KeyNav Support for DataView

JavaScript Function


var enter = function (dataView, dir) {

//Get index of the last selected node
var lastSelectedIndex = Math.max.apply(Math, dataView.getSelectedIndexes());

//Get index of the first selected node
var firstSelectedInxed = Math.min.apply(Math, dataView.getSelectedIndexes());

//No node(s) selected
if (!lastSelectedIndex) {lastSelectedIndex = 0;}
if (!firstSelectedInxed) {firstSelectedInxed = 0;}

//Total number of nodes.
var totalItems = dataView.getNodes().length - 1;

var nextIndex =
(
//If the selected node is the last item
//in the DataView
(lastSelectedIndex + 1 > totalItems)
?
//Goto the first node
0
:
//Goto the next node
lastSelectedIndex + 1
);
var previousIndex =
(
//If the selected node is first node
//in the DataView
(firstSelectedInxed - 1 < 0)
?
//Goto the last node
totalItems
:
//Goto the previous node
firstSelectedInxed - 1
);

switch (dir) {
case "left":
dataView.select(previousIndex);
break;
case "right":
dataView.select(nextIndex);
break;
}
return;
};


How to Use It?



<ext:KeyNav ID="KeyNav1" runat="server" Target="={document.body}">
<Left Handler="enter(#{YourDataViewID},'left');" />
<Right Handler="enter(#{YourDataViewID},'right');" />
</ext:KeyNav>

Daniil
Dec 11, 2011, 3:44 PM
Thanks for sharing! Looks cool.

capturetheflag
Jan 19, 2012, 2:42 PM
Hello NickBin,

How does this work for the tab, space, and enter keys? I have an application that uses tabs, grids, and pop boxes. I want to be able to navigate through it with the key board. I have attached a small part of the code to show you how it is constructed. I am new to java script and ExtJs as well.
Thanks for your help. I have used 'keypress' in this example but i am looking for a more global and permanent soluton.

With reference to the following post

http://forums.ext.net/showthread.php?16204-Ext-NET-DataView-with-KeyNav-Support

here is an improved version of KeyNav Support for DataView

JavaScript Function


var enter = function (dataView, dir) {

//Get index of the last selected node
var lastSelectedIndex = Math.max.apply(Math, dataView.getSelectedIndexes());

//Get index of the first selected node
var firstSelectedInxed = Math.min.apply(Math, dataView.getSelectedIndexes());

//No node(s) selected
if (!lastSelectedIndex) {lastSelectedIndex = 0;}
if (!firstSelectedInxed) {firstSelectedInxed = 0;}

//Total number of nodes.
var totalItems = dataView.getNodes().length - 1;

var nextIndex =
(
//If the selected node is the last item
//in the DataView
(lastSelectedIndex + 1 > totalItems)
?
//Goto the first node
0
:
//Goto the next node
lastSelectedIndex + 1
);
var previousIndex =
(
//If the selected node is first node
//in the DataView
(firstSelectedInxed - 1 < 0)
?
//Goto the last node
totalItems
:
//Goto the previous node
firstSelectedInxed - 1
);

switch (dir) {
case "left":
dataView.select(previousIndex);
break;
case "right":
dataView.select(nextIndex);
break;
}
return;
};


How to Use It?



<ext:KeyNav ID="KeyNav1" runat="server" Target="={document.body}">
<Left Handler="enter(#{YourDataViewID},'left');" />
<Right Handler="enter(#{YourDataViewID},'right');" />
</ext:KeyNav>

NickBin
Jan 20, 2012, 5:25 PM
Hi capturetheflag,

Welcome to Ext.net forums. :)

A couple of questions

Usage
As going through your attachment, I guess you are using ExtJS and want the client-side-only functionality. No problem if you are not inside ASP.net (at least for this functionality). It should work with any server language you use.

Functionality
As going through your attachment, I could not be sure of what you wanted. What will be the proposed functionality for the added keys: tab, space, and enter in a DataView control? I would be glad to help if your proposal improves navigation.

Regards.