Uncaught type error on custom widget binding for kendoNumericTextBox

[Junius]

Hi there,

I wanted to create my own custom widget binding for max configuration of numeric textbox.  With that, I found this article which describes on how to bind the max value of a Kendo UI numeric textbox widget.  The binding of the element that I want to achieve is like this 

<input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />

 

However, when I implement the provided code on this article https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#custom-widget-binding-in-typescript - Custom Widget Binding I got an exception when applyBinding function is called in kendo.all.js.  Please see screen shot attached.

Below is my custom widget binding implementation:

 var dataStoreData = {

max_lines: 20
max_orders: 50000
max_orders_per_request: 500

}

kendo.data.binders.widget.max = kendo.data.Binder.extend({
                init: (widget, bindings, options) => {
                    // Call the base constructor
                    kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                },
                refresh: () => {
                    const that = this,
                    value = that.bindings["max"].get(); // Get the value from the View-Model

                    $(that.element).data("kendoNumericTextBox").max(value); // Update the widget
                }
            });

            maxResultSettingsViewModel = kendo.observable({
                data: dataStoreData,
                settings: dataStoreData,
                onDataValueChange: changeData => {
                    console.debug("onDataValueChange event is triggered.", changeData);
                },
                onClickEvent: clickData => {
                    console.debug("onClickEvent event is triggered.", clickData);
                }
            });

            // Bind the container element with the observable object
            kendo.bind($("#collapsible-content"), maxResultSettingsViewModel);

 

Did I implement the above code incorrectly? Or, do I need to upgrade to new version of Kendo UI library?. currently, I'm using version 2019.3.1023

 

Any help is greatly appreciated.

Cheers,

Junius

[Angel Petrov]

Hello Junius,

The approach seems to work with the mentioned version as you can verify from this dojo. Can you please send us a sample in which this problem can be replicated? That way we should be able to quickly determine the root cause of the issue.

Regards,
Angel Petrov
Progress Telerik

[Junius]

Hi Angel,

Thank you for your response.

I made a sample out of the dojo that you have provided.  Please check it here https://dojo.telerik.com/OKAZumoL/5

That's the approach that I want to work with.  Please tell me if that is doable or should you provide an alternative way.

 

Cheers,

Junius

[Angel Petrov]

Hi Junius,

Actually the sample is working just one semantic correction needs to be done. The following

var viewModel = kendo.observable({
        data: { max_lines = 5, max_orders = 500 },
        setting: { max_lines = 20, max_orders = 50000 }
    });

Should be transformed to this

var viewModel = kendo.observable({
        data: { max_lines : 5, max_orders : 500 },
        setting: { max_lines : 20, max_orders : 50000 }
    });

Here is a modified working dojo.

Regards,
Angel Petrov
Progress Telerik

[Junius]

Hi Angel,

It's a dumb mistake of mine.  Thank you for your correction.

Regards,

Junius