Kendo.bind and scoping of datasource and handler functions

3 posts, 1 answers
  1. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 11 Mar Link to this post

    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?

     

     

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 16 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 16 Mar in reply to Rosen Link to this post

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

     

Back to Top