[Solved] DataSource as property in MVVM ViewModel , keeps sending read calls

[Neeraj]

Hello,
          I have 2 autocomplete and 2 dropdowns in kendo MVVM layout. 

the ViewModel is inside a function making it non-global. 

function GetPricingPCCSourceDS(optionfilters) {
    return new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: rootUrl("GetData/GetPricingPCC"),
                dataType: "json",
                data: { OptionFilters: optionfilters == null? null: optionfilters.toJSON() }
            }
        },
        serverFiltering: true

    });
}

function GetValidatingCarrierDS(e) {
    return new kendo.data.DataSource({
        transport: {
            read: {
                url: rootUrl("GetData/GetAirLines"),
                dataType: "json"

            }
        },
        serverFiltering: true

    });
}

function GetSupplierSourceDS(bookingPccId) {
    return new kendo.data.DataSource({
        transport: {
            read: {
                url: rootUrl("GetData/GetSuppliersForPricing"),
                dataType: "json",
                data: { officeId: bookingPccId }
            }
        },
        serverFiltering: true

    });
}

function TaskSuccess(){

var ViewModel = kendo.observable({
PricingTemplateSource: function () {
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("Fare/GetPricingTemplatestest"),
                        dataType: "json",
                        data: function(e) {
                            return {
                                optionFilters: JSON.stringify(ImportPNRPricingViewModel.OptionFilters),
                                validatingCarrier: JSON.stringify(ImportPNRPricingViewModel.OptionFilters
                                    .ValidatingCarrier)
                            };

                        }

                    }
                },
                group: [{ field: "FareOwner" }],
                serverFiltering: true
            });
        },
PricingPccSource: function (e) {
            var optionfilters = this.OptionFilters;
            return GetPricingPCCSourceDS(optionfilters);
        },
FareOptionsSupplierSource: function (e) {
            var bookingPccId = this.OptionFilters.BookingPccInformation.get('PccId');
            return GetSupplierSourceDS(bookingPccId);
        },
ValidatingCarrierSource: function(e) {
            return GetValidatingCarrierDS(e);
        }
});

}

 

  Some of DataSource requires input values to be passed. The UI works but thing is When i change autocomplete value or any DropDownList selection , the 2 DropDownList DataSource fires Read ajax calls again . 
      I could have made the Dojo sample but i didnt found any url that could have data as parameter in datasource

[Neeraj]

template code:

 

<div id="FareFilterForm" data-role="validator" novalidate="novalidate">
                <label class="vc-label">VC</label>
                <input type="text" data-role="autocomplete" style="width:55px" 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: OptionFilters.ValidatingCarrier,source: ValidatingCarrierSource, events: {open : ValidatingCarrierOnOpen}" /> <!--select : ValidatingCarrierOnSelect,change: ValidatingCarrierOnChange-->

                <label>Supplier</label>
                <input type="text" data-role="autocomplete" style="width:285px" 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="ShortName" title="Supplier" validationMessage="Supplier is Invalid/Required" data-supplier-msg="Supplier is invalid"
                       data-bind="value: OptionFilters.SupplierInfo, source: FareOptionsSupplierSource" />

                <label>PCC</label>
                <input data-role="dropdownlist" style="width:120px" required="required" data-value-primitive="false" id="supplierpcc" name="pcc"
                       data-text-field="PCCCode" validationMessage="PCC is Invalid/Required" data-value-field="PccId" data-template="pcctemplate"
                       data-bind="value: OptionFilters.PricingPccInformation, source: PricingPccSource, events: {change : PricingPCCOnChange, dataBound: OnDataBoundPCC}" />


                <input data-role="dropdownlist" class="fare-template" style="width:350px"
                       data-text-field="Name" data-template="FareItemTemplate"
                       data-value-field="Id" required="required"
                       data-value-primitive="true" validationMessage="Fare Template is Invalid/Required"  data-bind="value: FareTemplateID,
   source: PricingTemplateSource, events: {change : PricingTemplateOnChange, dataBound: OnDataBoundPricingTemplate}" />

[Nencho]

Hello Neeraj,

I have performed some local tests, but I was unable to replicate the duplicated request. Would it be possible to modify the dojo example below, where the custom functions need to be added? In addition, you can use some dummy data source just for replication.

https://dojo.telerik.com/@nenchef/ESEpIRIC/4

Regards,
Nencho
Progress Telerik

[Neeraj]

Hi Nencho, 
                   Thank you for help . I would be able to replicate if there is some remote dataSource with which i can send additional parameters , i am unable to find that kind of dataSource in which i can send parameter please help me with that and in the dojo the ViewModel will acts as global which is not in my case. The viewModel is enclosed in function.

[Nencho]

Hello Neeraj,

I can suggest you use an MVC project, where you can replate the calls to the data sources (in some services) to the actions in the controllers. This, with the combination of the usage of the DataSource's data function, you will be able to pass additional params to the actions (and the data source).

In the attachment you can find a runnable example, demonstrating a possible implementation of the above-described scenario. Please, modify it in a manner, so that the double request is replicated and send it back to us. 

Regards,
Nencho
Progress Telerik