CODEWITHSUNDEEP
javascriptslickgridjquery-textext
A.LeBreton
A.LeBreton

Reputation: 85

Integrating TextExt in SlickGrid custom editor

i want to implement a custom editor in SlickGrid using TextExt but I'm having trouble doing so.

I have two different lists args.column.names and `args.column.values. I want the tags to show the selected names but to post the list of the corresponding ids.

Here is a first draft, I don't really see how to manage that.

Can someone help me figure out what to write in these functions to match what I'm trying to do ?

function AutoCompletedTextField(args) {
    var $input;
    var defaultValue;
    var scope = this;

    this.init = function () {
        $input = $("<textarea class='textarea' rows='1'></textarea>")
            .appendTo(args.container)
            .bind("keydown.nav", function (e) {
                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                    e.stopImmediatePropagation();
                }
            })
            .focus()
            .select();

        $('.textarea').textext({
            plugins: 'tags autocomplete arrow'
        }).bind('getSuggestions', function (e, data) {
            var list = args.column.names,
                textext = $(e.target).textext()[0],
                query = (data ? data.query : '') || '';
            $(this).trigger('setSuggestions', { result: textext.itemManager().filter(list, query) });
        });

    };

    this.destroy = function () {
        $input.remove();
    };

    this.focus = function () {
        $input.focus();
    };

    this.getValue = function () {
        return $input.textext()[0].hiddenInput().val();
    };

    this.setValue = function (val) {
        $input.textext()[0].hiddenInput().val(val)
    };

    this.loadValue = function (item) {
        $input[0].defaultValue = item[args.column.field];
        $input.select();
    };

    this.serializeValue = function () {
        return $input[0].defaultValue;
    };

    this.applyValue = function (item, state) {
        item[args.column.field] = state;
    };

    this.isValueChanged = function () {
        return (!($input.textext()[0].hiddenInput().val() == "" && defaultValue == null)) && ($input.textext()[0].hiddenInput().val() != defaultValue);
    };

    this.validate = function () {
        if (args.column.validator) {
            var validationResults = args.column.validator($input.val());
            if (!validationResults.valid) {
                return validationResults;
            }
        }

        return {
            valid: true,
            msg: null
        };
    };

    this.init();
}

Upvotes: 0

Views: 286

Answers (1)

Ben McIntyre
Ben McIntyre

Reputation: 1968

You may want to try my repo, it's updated for the latest jQuery and has a lot of fixes and enhancements.

One of those enhancements is a Select2 editor, which is very similar to what you're trying to do. I think if you check that out it will be clear what is needed.
There's an example here.

As a bonus, there also a mechanism to allow certain keycodes to bubble through to the grid rather than be captured by the editor. This can be useful for up-arrow, etc. This isn't in the MLeibman branch.

Upvotes: 0

Related Questions