JQuery three state checkbox

Here’s a simple JQuery widget for a checkbox that supports a nullable boolean. Usefull to provide an undefined state to your checkboxes.

It is written in typescript and uses KendoWidget as a base class, that you can get from the community version of kendo.

Kendo d.ts definitions are available from nuget, see documentation here : http://docs.telerik.com/kendo-ui/third-party/typescript

///<reference path='references.ts' />

// jQuery auto complete for widget creation.
interface JQuery {
    kendoTriStateCheckbox(options?: KendoWidgets.ITriStateCheckboxOptions): JQuery;
    data(key: "kendoTriStateCheckbox"): KendoWidgets.TriStateCheckbox;
}

module KendoWidgets {

    export interface ITriStateCheckboxOptions {
        value?: boolean;
    }

    export class TriStateCheckboxOptions extends CustomKendoWidgetOptions implements ITriStateCheckboxOptions
    {
        name: string = 'TriStateCheckbox';
        value: boolean = undefined;
        title: string = '';
        allowNull: boolean = true;
    }

    export class TriStateCheckbox extends kendo.ui.Widget {

        options: TriStateCheckboxOptions;
        $togglerIcon: JQuery = null;

        protected _value: boolean = null;

        constructor(element: Element, options?: ITriStateCheckboxOptions) {
            super(element, options);

            var that = this;

            // original value.
            if (this.options.value !== undefined) {
                this._value = this.options.value;
            }

            // create the toggler.
            this.createToggler();
            this.createBatchEditShortcuts();

            // bind change the refresh
            this.bind('change', function() {
                that.refresh();
            });

            // refresh.
            this.refresh();
        }

        protected createBatchEditShortcuts() {

            var that = this;

            var $kEditCell = this.element.closest('td.k-edit-cell');
            if ($kEditCell.length) {

                // true button
                var $true = $('<button>').addClass('hidden').attr('accesskey', 't').click(() => that.value(true));
                var $true2 = $('<button>').addClass('hidden').attr('accesskey', 'o').click(() => that.value(true));
                var $false = $('<button>').addClass('hidden').attr('accesskey', 'n').click(() => that.value(false));
                var $null = $('<button>').addClass('hidden').attr('accesskey', 'r').click(() => that.value(null));

                // push elements.
                this.element
                    .append($true)
                    .append($true2)
                    .append($false)
                    .append($null);
            }
        }

        protected createToggler() {

            if (this.$togglerIcon) {
                return;
            }

            // create toggler.
            this.$togglerIcon = $('<a class="fa fa-2x btn btn-default btn-xs" data-toggle="tooltip" data-placement="right" title="test"></a>');

            // append toggler.
            this.element.append(this.$togglerIcon);

            if (this.options.title && this.options.title.length)
                this.element.append('&nbsp;' + this.options.title);

            // bind event.
            this.$togglerIcon.click($.proxy(this.toggle, this));
        }

        value(value: boolean = undefined) {

            if (value === undefined) {
                return this._value;      
            }

            this._value = value;
            this.trigger('change', {});
        }
   
        toggle() {

            var val = this.value();
            if (val === false) {
                this.value(true);
            } else if (val === true && this.options.allowNull) {
                this.value(null);
            } else {
                this.value(false);
            }
        }

        refresh() {

            var val = this.value();
            var icon = '';
            var tooltipMsg = '';

            if (val === true) {
                icon = 'fa-check-square-o';
                tooltipMsg = 'Vrai';
            } else if (val === false) {
                icon = 'fa-square-o';
                tooltipMsg = 'Faux';
            } else {
                icon = 'fa-minus-square';
                tooltipMsg = 'Non Défini';
            }

            this.$togglerIcon
                .removeClass('fa-check-square-o')
                .removeClass('fa-square-o')
                .removeClass('fa-minus-square')
                .addClass(icon)
                .attr('title', tooltipMsg)
                .attr('data-original-title', tooltipMsg)
                .tooltip();
        }
    }
    
    // Create an alias of the prototype (required by kendo.ui.plugin)
    TriStateCheckbox.fn = TriStateCheckbox.prototype;
    // Deep clone the widget default options
    TriStateCheckbox.fn.options = new TriStateCheckboxOptions();
    // Create a jQuery plugin.
    kendo.ui.plugin(TriStateCheckbox);

}

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This