external bind data to mvvm grid after jquery ajax success

[Neeraj]

Hello, I have following external template script. there is MVVM grid id=" initially  want it to get . In make jquery ajax call and on success when bind the grid the data show

kendo.bind($("#TSTGrid"), response);   // when executed doesnt show data

 

ajax success code:

$.ajax({
               type: "POST",
               dataType: "json",
               url: rootUrl("Fare/GetFareFamiliesMVVM"),
               data: {
                   pricingVm: AirPricingWoPNRViewModel.Item.AirPricingVM.toJSON(), command:cmd
               },
               success: function (response) {
                   debugger;
                  kendo.bind($("#TSTGrid"), response);

                   kendo.ui.progress($("#AirPricingContainer"), false);
               },
               error: function (xhr, ajaxOptions, thrownError) {
                   debugger;
                   kendo.ui.progress($("#AirPricingContainer"), false);
               }
           });

 

 

template script:

<script id="PricingHeader" type="text/x-kendo-template" class="KendoExtTemplate">
     <div class="row-fluid">
         <div id="FareFilterHeader" class="span9">
             <label class="vc-label">VC</label>
             <input type="text" data-role="autocomplete" validationMessage="Validating Carrier is Invalid/Required" id="validatingcarrier"
                    data-min-length="2" data-value-primitive="false" data-highlight-first="true" class="validating-carrier-autocomplete"
                    data-text-field="airline_value" data-template="AirportItemTemplate" title="Validating Carrier" required="required"
                    data-bind="value: ValidatingCarrier,source: ValidatingCarrierSource, events: {change: ValidatingCarrierOnChange,open : ValidatingCarrierOnOpen,select : ValidatingCarrierOnSelect }" />

             <label>Supplier</label>
             <input type="text" data-role="autocomplete" class="supplier-autocomplete" required="required" name="supplierpricing" id="supplierpricing"
                    data-min-length="2" data-value-primitive="false" data-highlight-first="true" data-template="SupplierItemTemplate"
                    data-text-field="Name" title="Supplier" validationMessage="Supplier is Invalid/Required" data-supplier-msg="Supplier is invalid"
                    data-bind="value: OptionFilters.SupplierInfo, source: FareOptionsSupplierSource, events: {change: SupplierPricingOnChange,open : SupplierPricingOnOpen
            ,select : SupplierPricingOnSelect}}" />

             <label class="fare-type-label">Fare Type</label>
             <input data-role="dropdownlist" required="required"
                    data-text-field="Description" validationMessage="Fare Type is Invalid/Required" data-value-field="Value"
                    data-value-primitive="true" data-bind="value: OptionFilters.FareTypeCode,source: FareTypeSource ,
             events: {change: FareTypeOnChange}" />

             <input data-role="dropdownlist" class="fare-template"
                    data-text-field="Name" data-template="FareItemTemplate"
                    data-value-field="Id" required="required"
                    data-value-primitive="true"
                    data-bind="value: FareTemplateID,
                    source: PricingTemplateSource" />


             <button class="k-button pricing-window-action-btn" data-bind="click: GetFareFamiliesByInformativePrice" type="button">Informative</button>
             <button class="k-button pricing-window-action-btn" data-bind="click: GetFareFamiliesByBestPrice" type="button">Best</button>


             <div data-role="grid" id="TSTGrid" class="fare-basis-grid"
                  data-columns='[
                      { "field": "Segments", "title": "FareBasis"},
                  {"field": "Segments","title":"Cabin"},
                  {"field": "Segments","title":"Segment"},
                  {"field": "UnitQualifier","title":"PTC"},
                  {"field": "Quantity","title":"Qty"},
                  {"field": "SupplierCommercials.SupplierHeads.NetFareInclTax","title":"Total"},
                  {"title":"Action",command: [
                     { text: "Select", click: AirPricingWoPNRViewModel.Item.SelectFareFamily, title: "Action"}

                  ]}
                  ]' data-row-template="FareFamilyRowTemplate"></div>

             <div data-template="PricingCommercialTemplate" id="PricingCommercialContainer" ></div>
         </div>

         <div class="span3" id="SegPaxInfoDiv">
             <div>
                 <b><i class="fa fa-plane passenger-plane-icon" aria-hidden="true"></i> Segments</b>
                 <table data-bind="source: Segments" id="Segments" data-template="SegmentTemplate" class="courierfont"></table>

             </div>
             <div class="passenger-div">
                 <b><i class="fa fa-users passenger-user-icon" aria-hidden="true"></i> Passengers</b>
                 <table data-bind="source: PNRPassengerInfos" data-template="PassengerTemplate" class="courierfont"></table>

             </div>
         </div>
     </div>


 </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Neeraj]

found . that ajax response was not set in kendo observable. directly was binding response

[Stefan]

Hello, Neeraj,

In this scenario, I can also suggest setting the response to the Grid data source using the data method inside the success callback. This will populate the Grid and automatically make an observable and all of the necessary bindings:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

$.ajax({
               type: "POST",
               dataType: "json",
               url: rootUrl("Fare/GetFareFamiliesMVVM"),
               data: {
                   pricingVm: AirPricingWoPNRViewModel.Item.AirPricingVM.toJSON(), command:cmd
               },
               success: function (response) {
                   debugger;
                  $("#TSTGrid").data('kendoGrid').dataSource.data(response)

                   kendo.ui.progress($("#AirPricingContainer"), false);
               },
               error: function (xhr, ajaxOptions, thrownError) {
                   debugger;
                   kendo.ui.progress($("#AirPricingContainer"), false);
               }
           });

Regards,
Stefan
Progress Telerik