Change Tab behavior

gcac

I've set up a DT + Keytable instance and its working great.

We are going to use a barcode scanner to input data into the application, and it sends TAB on successful scans (I think can make it send CR as well).

TAB moves the focus to the next column to the right. Can it be configured to stay in the same column, but drop to the next row similar to what we can do in Excel? Basically, I need to scan the serial numbers of a bunch of items, and each one be on a new row.

Thanks!
Nate

bindrid

yes, you would just a keydown event handler that watches for the tab key. When seen, set focus where you need it

bindrid

if you know the number of rows you have in advance, you can set the tabindex based on this calculation:

var g = (totalRows * column + row ) + 1 (plus one cause you cannot start with zero)

here is an example:

http://jsbin.com/zinabov/edit?js,output

allan

Yes, KeyTable's tab behaviour is to move to the left (or right), which I think is what Excel does is it not?

That line could be modified to be down if you wanted to change the current behaviour.

Allan

gcac

@bindrid Gotcha. I'm a newbie of sorts with the JS but I looked at your code and somewhat understand.

I won't know the number of rows in advance so that might not work for me.

This is what I am currently using:

<script type="text/javascript">


var editor; // use a global for the submit and return data rendering in the examples
var counter; counter = 0;

$(document).ready(function() {

    editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: "ajaxData_scanning.php",
            type: 'POST'
        },
        table: "#tacitRequests",

        fields: [ {
                label: "System UMPID",
                name: "requests.assigned_tacit_umpid"
            }, {
                label: "System SerialNum",
                name: "requests.assigned_tacit_serialnum"
            }, {
                label: "System PO NUM",
                name: "requests.po_num"
            }, {
                label: "iPad UMPID",
                name: "requests.assigned_ipad_umpid"
            }, {
                label: "iPad SerialNum",
                name: "requests.assigned_ipad_serialnum"
            }, {
                label: "iPad PO NUM",
                name: "requests.ipad_po_num"
            }
       ]
    } );
   
    table = $('#tacitRequests').DataTable( {
        dom: "lBfrtipl",
        ajax: {
            url: "ajaxData_scanning.php",
            type: 'POST'
        },
        // here we update the highlighting of the row based on critera of the data
        "rowCallback": function( row, data, dataIndex ) {
            switch (data.status.statusName) {
            case "pending":
                $(row).removeClass("warning success danger primary" );
                $(row).addClass('primary' );
                break;
            case "approved":
                $(row).removeClass("warning success danger primary" );
                $(row).addClass('success' );
                break;
            case "rejected":
                $(row).removeClass("warning success danger primary" );
                $(row).addClass('danger' );
                break;  
            default:
                $(row).removeClass("warning success danger primary" );
                $(row).addClass('primary' );
                break;
                }
        },
  
        columns: [
            { data: "requests.name" ,"title": "Name" },
            { data: "requests.department" ,"title": "Department"},
            { data: "requests.preferred_system", "title": "Preferred System" },
            { data: "requests.assigned_tacit_umpid", "title": "System UMPID" },
            { data: "requests.assigned_tacit_serialnum", "title": "System SerialNum" },
            { data: "requests.po_num", "title": "System PO NUM" },
            { data: "requests.assigned_ipad_umpid", "title": "iPad UMPID" },
            { data: "requests.assigned_ipad_serialnum", "title": "iPad SerialNum" },
            { data: "requests.ipad_po_num", "title": "iPad PO NUM" }

            ],
            keys: {
                editor:  editor
            },
            select: {
                style:    'os',
                selector: 'td:first-child',
                blurable: true
            },
            buttons: [
                { extend: "edit",   editor: editor }
            ],
        "order": [[ 0, "asc" ]],
        stateSave : false,
        "lengthMenu": [ [20, 50, 100,-1], [20, 50, 100,"All"] ],
    } ); // close table def

} );
</script>

Basically I will have a table filled with requests for various systems. I will use the search feature in DT to make the table only show, say, PC Desktops. I have a stack of PC Desktop boxes with barcodes on them for serialnum and umpid.

I'd like to place the cursor in the first row, and the column I want, then scan that barcode and have it drop to the same column on the next row. Basically I am just assigning a particular scanned barcode to a particular user.

@allan Is that in the keytable code where you mentioned I could change the functionality to down ? I am using a DT setup that is built on the site using the CDN and that may make it more difficult to edit the soruce code. Is there some configuration option I could use in my code to accomplish the same? I couldn't locate anything in the docs, but easily could have missed it. Open to any ideas.

Thanks so much for the help, guys.

Nate

allan

Yes - rather than 'left' if you use 'down' KeyTable will sort out the focus for you. In this case there isn't an option for what you are looking for - but its not an unreasonable one I think! That's something I'd be willing to add in.

How do you make Excel behave like that? I'd basically like KeyTables' behaviour to be similar to Excels.

Allan

gcac

@allan Thanks so much for the clarification! I think what we have done rather is modified the scanner configuration so that it sends a CR instead of tab. That drops it down a row vs. moving to the next column to the right.

What I see with things set up like they are now (scanner sending CR after), is that in DT it enters the data in the field and just stays focused there.

Maybe in my case I could make the scanner send a "down arrow" instead. It's a thought.