Updating the ViewModel after DataSource read

4 posts, 0 answers
  1. axwack
    axwack avatar
    37 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2012 Link to this post

    This seems like it would happen automatically but I'm not seeing it.

    I send a viewmodel with my attributes to my controller. It makes the necessary update and returns a value or the model.

    If I send back the model, will the datasource make the correct updates to the attributes that are now updated?

    [EDIT]
    After extensive debugging and a lot of searching on the forum for jewels of information I came across one that gave me an idea.

    In order to make a change to your ViewModel: Model you have to go to your DataSource.change method. In here, you then create a function to get the data from the JSON result passed back from your controller. In my case, I am submitting my whole model and returning it with an updated value called YTM.

    Here is a snippet of code that will help you:
    change: function() { // subscribe to the CHANGE event of the data source
                               viewModel.data = this.view()[0];
                               viewModel.order.set("ResidualYield", viewModel.data.ResidualYield);
                               
                           }

    The ViewModel data attributes are stored in data. You can inspect this using the inspector in Chrome. What happens is that this will get the viewmodel. In my example, my viewmodel has a model called "order". I get a handle to this and then set it from the return JSON in viewModel.data. If someone has a better "best practice" let me know. This took me several days to figure out because of the lack of good documentation. 
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 30 Aug 2012 Link to this post

    Hi Vincent,

    I am afraid that your scenario is a bit unclear. Could you please provide more information about what you would like achieve and an example that demonstrates your current implementation? Thus way I would be able to examine your case in details and provide you with a concrete recommendations.

    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. axwack
    axwack avatar
    37 posts
    Member since:
    Aug 2012

    Posted 30 Aug 2012 Link to this post

    Hi Alexander,

    Sure. My scenario is the following. I have a form that is bound to a viewmodel. In the viewmodel is a datasource, similar to your example on the demos. The user will enter a number of values on the form, the end result will produce some derived values. Unfortunately, I have a function on the server (it calculates Yield to Maturity that will give you the same value as Excel's YTM function). The function requires 5 inputs from the form so I have to make an ajax call to the server to POST the values of the MODEL to the function. I take out the values for the function, calculate the value of YTM and postback the model to the page with the updated YTM calculation (this is also a NumericTextbox on the page).

    What the problem is, is that if I have resubmit, the data source doesn't see a change on the client to resubmit a new model to the server.

    If you see the change function, I was thinking that you could change the model and resubmit? How do you resubmit a changed model?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 04 Sep 2012 Link to this post

    Hi Vincent,

    As I understood it the problem is that the updated dataSource values does not automatically apply in the view (e.g. form input elements). I believe this is happening because the change of the dataSource's data does not trigger the change of the viewModel. As a solution I would recommend triggering the viewModel's change event manually. Here is a very short example:
    var viewModel = kendo.observable({
        foo: new kendo.data.DataSource({
            data: [
                {item: 1},
                {item: 2}
            ],
            change: function() {
                viewModel.trigger("change", {field: "foo"}); //trigger change of the viewModel
            }
        }),
        bar: 1
    });


    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!
Back to Top