This is a migrated thread and some comments may be shown as answers.

DataSource as property in MVVM ViewModel , keeps sending read calls

4 Answers 59 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 26 Oct 2018, 05:42 AM

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

4 Answers, 1 is accepted

Sort by
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 26 Oct 2018, 06:24 AM
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}" />
0
Nencho
Telerik team
answered on 29 Oct 2018, 02:40 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 30 Oct 2018, 04:31 AM
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.
0
Nencho
Telerik team
answered on 31 Oct 2018, 03:28 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MVVM
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Neeraj
Top achievements
Rank 1
Veteran
Nencho
Telerik team
Share this question
or