Custom Editor - 3rd party widget

Webix JS
#1

Hi,
Do you have any documentation on adding a custom editor based on a 3rd party widget? I’m trying
to use http://autonumeric.org/.

Thanks,
Tomas

#2

Hi,

I came up with is:

/*
** AutoNumeric
*/

webix.editors.AutoNumeric = {
    focus: function () {
        this.getInputNode().focus();
    },
    getValue: function () {
        if (this.getInputNode() != undefined && this.getInputNode().value != null) {
            return this.getInputNode().value;
        }

        return this.getInputNode().value || "";
    },
    setValue: function (t) {
        let node = this.getInputNode();
        node.value = t;
    },
    getInputNode: function () {
        return this.node.firstChild;
    },
    render: function () {
        var AutoNum = '<input type="text"> </input>';

        return webix.html.create("div", {
            "class": "webix_dt_editor"
        }, AutoNum);
    },
    afterRender: function () {
        this.AutoNumeric = new AutoNumeric(this.getInputNode(), this.config.settings)
    },
    destroy: function () {
        delete this.AutoNumeric;
    }
};

Would this be correct?

-Tomas

#3

Hi,

When initializing property view using the new editor, how do I format the control with the editor?

-Tomas

#4

Good day @TomasF,

In general, a custom Webix widget (usually based on primary ui.view) can serve as a container for a third-party widget (in other words, for any html content).

Firstly, in webix.protoUI() you need to name and init your integration pattern:

webix.protoUI({
    name:"myCustomName",
    $init:function(config){ ... },
    *// other methods*
}, webix.ui.view);

Secondly, you need to initialize component on a page by basic webix.ui :

webix.ui({
    view:"myCustomName",
    url: "", 
});

In docimentation you can take a closer look at the integration process. Plus, in the webix-hub on GitHub page you can find ready-made integrations like CKEditor 5.
Please, check out the snippet with a sample.

#5

Unfortunately, I initially missed the point and gave the wrong comment on your question. So sorry for confused you.

The example you sent works, but applies the formatting not only in the input template, but also changes the actual value in the data. The editor must return an unformatted value so that the data does not store a value that can later mutate into a string.

Firstly, you need to set an unformatted value to the method getValue() using the getNumber() method.

Secondly, using format() method, set template with formatted value:

template(obj, common, value, column, index) {
   return AutoNumeric.format(value);
}

Please, check outh the snippet with example: Code Snippet

#6

Hi,
Thank you!!
How can that be used as widget with protoUI?

-Tomas

#10

Hi,

Would this be correct?

https://snippet.webix.com/5ctmfiht

-Tomas