bind kendo.data.DataSource to combo using MVVM

Question

Again next question , this time a tricky one,

Datasource:

var dsCountryList =
       new kendo.data.DataSource({
           transport: {
               read: {
                   dataType: "jsonp",
                   url: "/Masters/GetCountries"
               }
           },
           schema: {
               model: {
                   id: "CountryID",
                   fields: {
                       "CountryDesc": {

                       }
                   }
               }
           }
       });

Observable object

function Set_MVVMSupplier() {
    vmSupplier = kendo.observable({
        SupplierID: 0,
        SupplierName: "",
        AccountNo: "",
        CountryList: dsCountryList,
});

    kendo.bind($("#supplierForm"), vmSupplier);
}

here is the html which is bind to observable object , but i am not getting combobox filled, also each time i clicked the combo request goes to server and bring data in json format for countryID, CountryDesc

 <div class="span6">
                <div class="control-group">
                    <label class="control-label" for="txtCountryId">Country</label>
                    <div class="row-fluid  controls">
                        @*<input class="input-large" type="text" id="txtCountryId" placeholder="CountryId" data-bind="value: CountryId">*@
                        <select  id="txtCountryId" data-role="dropdownlist"
                             data-text-field="CountryDesc" data-value-field="CountryID" , data-skip="true"
                             data-bind="source: CountryList, value: CountryDesc">
                        </select>
                    </div>
                </div>
            </div>

Answer 1

I didn't get the answer , so i found an alternate working ice of code. just have a look and if it helps then please vote.

created model for ddl in js file

 ddl = kendo.data.Model.define({
    fields: {
        CountryId: { type: "int" },
        ConfigurationID: { type: "int" }
    }
});

added var ddl to MVVM js file

 vmSupplier = kendo.observable({
    CountryId: new ddl({ CountryId: 0 }),
    ConfigurationID: new ddl({ ConfigurationID: 0 }),});

added code in controller

 using (CountriesManager objCountriesManager = new CountriesManager())
        {
            ViewBag.Countries = new SelectList(
                objCountriesManager.GetCountries().Select(p => new { p.CountryID, p.CountryDesc })
                , "CountryID", "CountryDesc"); ;
        }

added code in cshtml

      <div class="span4">
                        <label class="control-label" for="txtCountryId">Country</label>
                        @Html.DropDownList("Countries", null,
                      new System.Collections.Generic.Dictionary<string, object> {
                      {"id", "txtCountryId" },
                      { "data-bind","value: CountryId"} })

                    </div>

this way i got solved the problem