Binding Data to combobox after ajax call using mvvm

2 posts, 0 answers
  1. Dinesh
    Dinesh avatar
    2 posts
    Member since:
    Oct 2012

    Posted 08 Apr 2013 Link to this post

    Hi,

    I am using MVVM Framework

    var indexViewModel = kendo.observable({
    StatesList: statesList,
    CountriesList: countriesList,
    SelectedCountry: null
    });


    kendo.bind($("body"), indexViewModel);

    Calling an ajax call in document ready function

    $("document").ready(function () {
    GetBaseInfo();
    }

    function GetBaseInfo()
    {
    $.ajax({
    url: "http://localhost:64283/DRRService.svc/GetBaseData",
    dataType: "jsonp",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
    if (data == null) {
    alert("No Data Available");
    }
    else {

    statesList = data.statesList;
    countriesList = data.countriesList;
     
    $("#countriesCombo").data("kendoComboBox").dataSource.data = countriesList;
    $("#countriesCombo").data("kendoComboBox").refresh();

     
    }
    }
    });

    }
    Mu UI Part is this

    <select id="countriesCombo" data-role="combobox" data-text-field="Value"
    data-bind="source:CountriesList" />

    The data is not getting refreshed. Can you please provide the solution to this
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 10 Apr 2013 Link to this post

    Hello Dinesh,

    You should set the new arrays to the viewModel e.g.
     

    indexViewModel.set("StatesList",  data.statesList);
    Kind regards,
    Daniel
    the Telerik team
    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
Back to Top