Nov 15, 2011, 6:28 PM
Ext.NET DataView with KeyNav Support
I have been a big fan of DataView control since it a powerful, flexible, and optimizable control. The biggest concern was that it lacked keyboard navigation. After visiting Sencha DataView documentation, I thought it was pretty simple. Although this has not been tested with DataView having paging control, it works well otherwise.
JavaScript Function
JavaScript Function
<script type="text/javascript" language="javascript">
var enter = function (dataView, dir) {
//Get index of the last selected node (for multiple selection)
var selectedIndex = Math.max.apply(Math, dataView.getSelectedIndexes());
//No node was selected
if (!selectedIndex) {
//Initialize the index
selectedIndex = 0;
}
//Count the total number of visible nodes.
var totalItems = dataView.getNodes().length - 1;
var nextIndex =
(
//If the selected node is the last item
//in the DataView
(selectedIndex + 1 > totalItems)
?
//Goto the first node
0
:
//Goto the next node
selectedIndex + 1
);
var previousIndex =
(
//If the selected node is first node
//in the DataView
(selectedIndex - 1 < 0)
?
//Goto the last node
totalItems
:
//Goto the previous node
selectedIndex - 1
);
switch (dir) {
case "left":
dataView.select(previousIndex);
break;
case "right":
dataView.select(nextIndex);
break;
}
return;
};
</script>
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>
Regards.
Last edited by NickBin; Nov 19, 2011 at 4:35 PM.
Reason: Correction