Ext.NET DataView with KeyNav Support (Improved)

  1. #1

    Ext.NET DataView with KeyNav Support (Improved)

    With reference to the following post

    http://forums.ext.net/showthread.php...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>
  2. #2
    Thanks for sharing! Looks cool.
  3. #3

    How does this work for Tab, space, and enter keys?

    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.
    Quote Originally Posted by NickBin View Post
    With reference to the following post

    http://forums.ext.net/showthread.php...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>
    Attached Files
  4. #4

    Re:

    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.

Similar Threads

  1. [CLOSED] DataView to DataView Drag and Drop
    By paulc in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 8:19 PM
  2. Ext.NET DataView with KeyNav Support
    By NickBin in forum Examples and Extras
    Replies: 6
    Last Post: Dec 18, 2011, 3:47 PM
  3. [CLOSED] KeyNav Tab Event Firing Inconsistently
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 10, 2011, 1:09 PM
  4. deluxe portal examples improved
    By manelj in forum 1.x Help
    Replies: 0
    Last Post: Oct 19, 2008, 3:47 AM

Tags for this Thread

Posting Permissions