Tips & tricks

Here you find a collection of useful code snippets.

Automatically scroll focused editor into view

Set the following onEditorFocused function in the initialization options.

onEditorFocused: function () {

    var $window = $(window);
    var $body = $('html, body');
                var elem = $(this);

    var elemTop = elem.offset().top;
    var elemLeft = elem.offset().left;
    var windowWidth = $window.width();
    var windowHeight = $window.height();
    var docViewTop = $window.scrollTop();
    var docViewLeft = $window.scrollLeft();

    //Center element on screen
    var scrollVertical = (elemTop + elem.height() > docViewTop + windowHeight) || (elemTop < docViewTop);
    var scrollHorizontal = (elemLeft + elem.width() > docViewLeft + windowWidth) || (elemLeft < docViewLeft);
    if (scrollVertical && scrollHorizontal) {
        //Scroll diagonally
        $body.stop()
            .animate({
                scrollTop: (elemTop - windowHeight / 2) + 'px', 
                scrollLeft: (elemLeft - windowWidth / 2) + 'px'
            }, 'fast');
    } else if (scrollVertical) {
        //Scroll vertically
        $body.stop()
            .animate({
                scrollTop: (elemTop - windowHeight / 2) + 'px'
            }, 'fast');
    } else if (scrollHorizontal) {
        //Scroll horizontally
        $body.stop()
            .animate({
                scrollLeft: (elemLeft - windowWidth / 2) + 'px'
            }, 'fast');
    }
}

Attach a datepicker to date fields

Attach the class "date" to all date fields and set the following shown function in the initialization options.

shown: function (editor) {
    if ($(this).hasClass('date')) {
        var temp = editor.val();
        editor.datepicker({
            showButtonPanel: true,
            onSelect: function () { this.focus(); } //Returns focus to the textbox
        });
        editor.datepicker("option", "dateFormat", "yy-mm-dd");
        editor.val(temp);
    }
}