Updating Kendo ViewModel in a double-click event

[Stewart]

Hi, 
I have been struggling to get the code below to work and need some advice. 
Currently I am testing out the Kendo MVVM and am relatively new to javascript so my apologies upfront if I am missing out on something obvious.

My current goal is to update my viewModel with a new JSON related object after a double-click row event occurs on my grid.

The difficulty that I am having is to assign a value to my viewModel outside of the initial declaration. I want to call a different function and for it have access to the viewModel to update it.

01.Main starting point for Javascript file
02.
03.$(document).ready(function () {
04.    console.log("Loading");
05.    var viewModel = new TradeViewModel();
06.    LoadControls();
07.    kendo.bind($("#view"), viewModel);
08.});
09.
10.
11.var TradeViewModel = function() {
12.    var self = this;
13.
14.    var dateNow = getFormattedDate();
15.    self.viewModel = kendo.observable({
16.        search: {
17.            DateFrom: dateNow,
18.            DateTo: dateNow,
19.            TradeId: null,
20.            TradeStatus: "All",
21.            IsVoice: true,
22.            IsLive: false,
23.            BuyCompany: null,
24.            SellCompany: null
25.        },
26.        tradeDetailsSearch: {
27.            LiveTradeId: 0,
28.            EngineId: 0,
29.            ServerId: 0
30.        },
31.        tradeData: "SomeData"
32.    });
33.        self.viewModel.bind("change", function (e) {
34.        // This function works and is fine.
35.        TradeSearch(param1,param2);
36.        console.log(e.field);
37.        console.log("Event Binding finished");
38.}
39.
40.var RefreshGrid = function (apiQuery) {
41.
42.var ds = new kendo.data.DataSource({
43.        transport: {
44.            read: {
45.                url: apiQuery,
46.                dataType: "json"
47.            }
48.        }
49.    });
50.
51.            $("#grid").kendoGrid({
52.              // standard binding to grid etc... this works fine
53.             });
54.
55.           // This registers a double-click listener, in my case I get the row details back.
56.           $(".k-grid-content").dblclick(DoubleClickAction);
57.};

Now this next part is the area that I am having a problem trying to get right. 

1.function DoubleClickAction() {
2.    var grid = $("#grid").data("kendoGrid");
3.    var selectedRow = grid.dataItem(grid.select());
4.    console.log("You have double clicked on " + selectedRow.LiveTradeID);
5.
6.   // And now the different approaches I have taken to set the viewModel data.

I get an error here and for each of the examples below this because it says viewModel is not defined. I am just not sure how to reference it for this function?

1.//... same function code as above.
2.
3.    // I get an error here that says : Uncaught ReferenceError: viewModel is not defined
4.    var testTradeData = viewModel.get("tradeData");
5.    console.log(testTradeData);
6.};

01.//... same function code as above.
02.
03.// Get JSON data based on Id
04.
05. $.getJSON(apiQuery)
06.      // Handle success event.
07.     .done(function (jsonData) {
08.         if (jsonData.isEmptyObject)
09.             console.log("No data received");
10.         else {
11.             console.log("JSON data: " + jsonData);
12.
13.              var mappedTradeArray = $.map($.makeArray(jsonData), function(tradeData)
14.              {
15.                 return new GetTradeDetails(tradeData);
16.              });
17.             // I can see this correctly works and gets the data.
18.             console.log(mappedTradeArray);
19.
20.             // ERROR : I get the same:
21.             //  'Uncaught ReferenceError: viewModel is not defined error' message
22.             viewModel.tradeData =mappedTradeArray[0];
23.
24.             // ERROR: I can also try to set it from the documentation
25.            // that I have read on this website but get the same error :
26.             viewModel.set("tradeData",mappedTradeArray[0]);
27.         };
28.     });
29.

[Petyo]

Hello Stewart,

your approach is correct in general. The problem you are facing is due to the viewModel variable is being declared in the document.ready closure, thus not being accessible from outside. Something like this:

var viewModel;

$(document).ready(function () {
    console.log("Loading");
    viewModel = new TradeViewModel();
    LoadControls();
    kendo.bind($("#view"), viewModel);
});

will resolve the 'not defined' error. 

Regards,
Petyo
Telerik

[Stewart]

Hello Petyo,
Thank you for your assistance, that has now worked.

I did also have to make a change in terms of naming as I called my top-level variable viewModel and my TradeViewModel() function had the same name viewModel, after renaming it, it became clearer to see the issue I was having as well.