DataSource as property in MVVM ViewModel , keeps sending read calls

5 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    135 posts
    Member since:
    May 2015

    Posted 26 Oct 2018 Link to this post

    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

  2. Neeraj
    Neeraj avatar
    135 posts
    Member since:
    May 2015

    Posted 26 Oct 2018 Link to this post

    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}" />
  3. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 29 Oct 2018 Link to this post

    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.
  4. Neeraj
    Neeraj avatar
    135 posts
    Member since:
    May 2015

    Posted 29 Oct 2018 Link to this post

    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.
  5. Nencho
    Admin
    Nencho avatar
    1871 posts

    Posted 31 Oct 2018 Link to this post

    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.
Back to Top