dhis2-devs team mailing list archive

[Ngoc Thanh Nguyen <thanh.hispvietnam@xxxxxxxxx>]

Many users requested to be able to do 4 ways navigation in entry form.
I made the following change to enable that feature. I'd like to share it to
those who have ever received that kind of request from users.


1. Remove the keypress bind event in form.js
2. Add an attribute (I used mycol) to each text field to group all the
inputs that belong to a column. Like this <input name="entryfield"
mycol='col$colid'
3. Add the following js script to the entry form.

It works really fine.


$(document).ready(function() {
    $(".entryfield").keydown( function (e) {
        switch(e.keyCode)
        {
            // left arrow
            case 37:
                $(this).parent()
                        .prev()
                        .children(".entryfield")
                        .focus();
                break;

            // right arrow
            case 39:
                $(this).parent()
                        .next()
                        .children(".entryfield")
                        .focus();
                break;

            // up arrow + as attr name is already used, I defined mycol to
mark the cells that belong to 1 column
            case 40:
                $(this).parent()
                        .parent()
                        .next()
                        .children("td")

.children(".entryfield[mycol="+$(this).attr("mycol")+"]")
                        .focus();
                break;

            // down arrow
            case 38:
                $(this).parent()
                        .parent()
                        .prev()
                        .children("td")

.children(".entryfield[mycol="+$(this).attr("mycol")+"]")
                        .focus();
                break;
        }
    });
});