Kendo.bind and scoping of datasource and handler functions

[Bob]

I am working on using the declarative widget configuration so I can dynamically add stuff to the dom and wire it up with a simple kendo.bind('selector call') however I am having some issues with scoping. I am using an IIFE, creating a datasource in it, and calling bind in document ready.. if I do this...

(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: baseUrl + "Lookup/CustomerKendo"
                }
            },
            serverFiltering: true,
            schema: {
                data: "Data"
            }
        });

    // Document Ready
    $(function () {
        kendo.bind("#content");
    });
}());

I get an error that dataSource does not exist. I was able to get it to work by doing this...

 

var billingEdit = billingEdit || {};

(function () {

    // Document Ready
    $(function () {
        billingEdit.dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: baseAreaUrl + "Lookup/CustomerKendo"
                }
            },
            serverFiltering: true,
            schema: {
                data: "Data"
            }
        });

        kendo.bind("#content");
    });
}());

 

and specifying billingEdit.dataSource in the data-source attribute. However, I want to avoid creating global variables. Is this possible? I also expect that if I put functions in the IIFE they will be invisible as well and I'll get more errors.

how can I have the controls be bound withing the scope of the IIFE?

 

 

[Rosen]

Hello Bob,

Indeed, in order data-source attribute to work the DataSource instance to which the widget should be bound must be available in the global scope. Otherwise, there is no way to access it when the widget is been created.

If you want to use a local variable, then you should consider using source binding and a ViewModel to which the DataSource instance to be attached and pass the ViewModel to the kendo.bind method. Similar approach is demonstrated in this online demo.

Regards,
Rosen
Telerik

 

 

[Bob]

Thanks. The react components can't come soon enough. ;)