PDA

View Full Version : Ext.NET DataView with KeyNav Support



NickBin
Nov 15, 2011, 6:28 PM
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



<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.

NickBin
Nov 17, 2011, 1:35 PM
Hi Admins:

The above post is an example of how we can use KeyNav along with DataView.

This post has been moved from "examples and extras" to "help" section of this forum by mistake.

Regards.

Daniil
Nov 19, 2011, 4:19 PM
Hi,

Apologize.

Just the question mark confused me.



How to Use It?

NickBin
Nov 19, 2011, 4:33 PM
The above code has been tested with a DataView with a paging control and seems to work well.

If you find any problems regarding the usage of the code, please feel free to contact me.

Regards

Daniil
Nov 19, 2011, 4:39 PM
Ok.

Thanks for the sharing the example. Looks good.

ramzey
Dec 18, 2011, 3:15 PM
thank you very much I looking for this a long time but this is work good with DataView with out Ext.DataView.DragSelector

like this

http://examples1.ext.net/#/DataView/Basic/Overview/

could you please fix it ?

NickBin
Dec 18, 2011, 3:47 PM
Hi ramzey,

I could not fully understand what you said.

The scripts work fine with or without the plugin "Ext.DataView.DragSelector". Could you please post the markup if you have any problem.

Lastly, please use the updated script from the following Url.

http://forums.ext.net/showthread.php?16468-Ext-NET-DataView-with-KeyNav-Support-(Improved)