Ext.NET DataView with KeyNav Support

[NickBin]

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]

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]

Hi,

Apologize.

Just the question mark confused me.

How to Use It?

[NickBin]

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]

Ok.

Thanks for the sharing the example. Looks good.

[ramzey]

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

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

could you please fix it ?

[NickBin]

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...ort-(Improved)