As a developer using Kendo UI, I encountered an issue while trying to customize the form functionality using Kendo’s plugin feature. I extended the form widget but faced an error where this is undefined when trying to call the parent constructor within the custom form’s constructor. Below is the code snippet demonstrating the problem.

let originalForm = kendo.ui.Form;

let CustomKendoForm = originalForm.extend({
    init: function (element, options) {
        var that = this;
        console.log('this', this);
        originalForm.fn.init.call(that, element, options);

        console.log('element', element);
        console.log('options', options);
    },

    _setModel: function () {
        var that = this,
            options = that.options,
            formData = options.formData || {};

        if (options.formData instanceof kendo.data.ObservableObject) {
            that._model = formData;
            return;
        }

        var MyModel = kendo.data.Model.define({ fields: that._fields });
        that._model = new MyModel(formData);
        console.log("Custom setModel called");
    }
})(window.kendo.jQuery, window.kendo);

// Kendo UI 위젯으로 등록
kendo.ui.plugin(CustomKendoForm);

The main issue lies in the fact that this is undefined when trying to call the parent constructor within the init method of the extended widget. This prevents the custom form from initializing correctly.

I hope it doesn’t come out as undefined when debugging ‘this’ with console.log.