Updating Kendo ViewModel in a double-click event

3 posts, 1 answers
  1. Stewart
    Stewart avatar
    3 posts
    Member since:
    Jun 2013

    Posted 28 Jan 2014 Link to this post

    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.    

  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Jan 2014 Link to this post

    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
    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. Stewart
    Stewart avatar
    3 posts
    Member since:
    Jun 2013

    Posted 30 Jan 2014 Link to this post

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