Append local objects to remote data source?

5 posts, 0 answers
  1. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 15 Mar 2012 Link to this post

    I wasn't sure if this belonged in the datasource or mvvm thread.  We're attempting to use MVVM with a remote data source, however, we have several cases where we want to add more objects to the data source from the local side.

    In our case, one example is for a select list with 1000 items in it.  We can have our web service build that select list object, but it increases the request size considerably.  We would prefer that this list of 1000 items be generated using a for loop on the client side.  We've tried things like this:

    var UserLimitOptions = function () {
        var options = [];
        for (i = 1; i <= 1000; i++) {
            options.push({ Id: i, Name: i });
        }
        return options;
    };
     
     
    var subscriptionViewModel = new kendo.data.ObservableObject({
       data: [],
       UserLimitOptions: UserLimitOptions
     });

    I'm filling the data object in the change event of the datasource.

    However, when I bind a select list to the UserLimitOptions object of the view model, the change event of the select list errors - I assume because UserLimitOptions isn't "observable".

    Any ideas on this?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 20 Mar 2012 Link to this post

    Hello Nick,

    I am not sure if I understood your problem correctly. Are you experiencing troubles binding a select list to the view model? Your code looks ok, except that you are not calling the UserLimitOptions function on model initialization - that means the UserLimitOptions field will not be populated automatically.

    I tried with the following configuration and everything works as expected.
    <select data-text-field="Name" data-value-field="Id"  data-bind="source: UserLimitOptions"></select>
     
    <script>
        var UserLimitOptions = function () {
            var options = [];
            for (i = 1; i <= 1000; i++) {
                options.push({ Id: i, Name: "Name" + i });
            }
            return options;
        };
         
        var subscriptionViewModel = new kendo.data.ObservableObject({
            data: [],
            UserLimitOptions: UserLimitOptions()
        });
          
        $(document).ready( function() {
            kendo.bind($("#example"), subscriptionViewModel);
        });
    </script>

    I hope this information helps. Please let me know if I missed something.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 20 Mar 2012 Link to this post

    Thanks Alexander,

    Sorry - you're right, what I originally described is possible - the problem for us came when we tried to pass a parameter from the remote data source into the locally defined function with the desired effect to be that the options list is reduced.

    For example:
    http://jsfiddle.net/y4qhj/39/

    <div id="example">
        <select id="localSelect" data-text-field="Name" data-value-field="Id"  data-bind="source: UserLimitOptions, value: LocalValue"></select>
     
    </div>

    var UserLimitOptions = function (limit) {
        var options = [];
        for (i = 1; i <= 1000; i++) {
            if(i > limit)
            {
                options.push({ Id: i, Name: "Name" + i });
            }
        }
        return options;
    };
     
    dataSource = new kendo.data.DataSource({
        schema: {
            model: { id: "ProductID" }
        },
        transport: {
            read: {
                dataType: "jsonp",
                url: "http://demos.kendoui.com/service/Products"
            }
        },
        change: function () {
            viewModel.data = dataSource.view();
            kendo.bind($("#example"), viewModel);
        }
    });
     
    var viewModel = new kendo.data.ObservableObject({
        data: [],
        LocalValue: function () { return this.get("data.MinUsers"); },
        UserLimitOptions: function () { return UserLimitOptions(this.get("data.MinUsers")); }
    });
     
    dataSource.read();

    NOTE: In this case, the remote data source is NOT returning a MinUsers object - this is just an example.  In practice though, using "LocalValue" throughout the html view works great, but using UserLimitOptions does not for some reason.

    Any idea how I can accomplish the above?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 22 Mar 2012 Link to this post

    Hi Nick,

    Please check the following example - the UserLimitOptions uses variable from the dataSource (lenght) and reduces the select options. It is important to use the set and get methods (or in that case the push method) when assigning values to a MVVM field. The standard " = " operator will not create the internal objects nor the event listeners.

    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Nick
    Nick avatar
    31 posts
    Member since:
    Oct 2011

    Posted 22 Mar 2012 Link to this post

    The release version fixed the issue for me - thanks so much!
Back to Top