This is a migrated thread and some comments may be shown as answers.

Append local objects to remote data source?

4 Answers 172 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 15 Mar 2012, 03:08 PM
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?

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Mar 2012, 02:07 PM
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!
0
Jeff
Top achievements
Rank 1
answered on 20 Mar 2012, 08:47 PM
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?
0
Alexander Valchev
Telerik team
answered on 22 Mar 2012, 03:37 PM
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!
0
Jeff
Top achievements
Rank 1
answered on 22 Mar 2012, 06:51 PM
The release version fixed the issue for me - thanks so much!
Tags
MVVM
Asked by
Jeff
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or