Datasource Read () in ViewModel

[Neeraj]

Hello,
            I have a function which constructs Observable ViewModel. In that there are 4-5 dataSource. 

function GetAirRequestMVVMTemplate() {
    debugger;
    //kendo.ui.progress($("body"), true);

    var airRequestViewModel = kendo.observable({
        FlightDestinationSource: function(e) {
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetCountry"),
                        dataType: "json"
                    }
                },
                serverFiltering: true
            });
        },
        FlightOriginSource: function(e) {
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetCountry"),
                        dataType: "json"
                    }
                },
                serverFiltering: true
            });
        },
        ViaSource: function (e) {
            debugger;
            var viadata = e.ArriveDepartDetails.via;
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetCountry"),
                        dataType: "json",
                        data: function (e) {
                            return {
                                adddata: JSON.stringify(viadata) //viadata != null ? JSON.stringify(viadata) : JSON.stringify([])
                            };
                        }
                    }
                },
                serverFiltering: true
            });
        },
        AirlineIdsSource: function (e) {
            debugger;

            var airdata = e.AirlineIds;
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetAirLines"),
                        dataType: "json",
                        data: function (e) {
                            return {
                                data: JSON.stringify(airdata)
                            };
                        }
                    }
                },
                serverFiltering: true
            });
        },
        ClassSource: function(e) {
         return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/Get_Air_Class_Details"),
                        dataType: "json"
                    }
                }
            });
        },
        AllianceSource: function(e) {
            return new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetAlliance"),
                        dataType: "json"
                    }
                }
            });
        },
        TimeTypeSource: function(e) {
            return new kendo.data.DataSource({
                data: [
                    { Text: "None", Value: "-1" },
                    { Text: "Departs", Value: "D" },
                    { Text: "Arrives", Value: "A" }
                ]
            });
        },
        TimeTypeDataBound: function (e) {
            debugger;
            if (e.data.ArriveDepartDetails.TimeType == null) {
                e.data.ArriveDepartDetails.set("TimeType", "-1");
            }
        },
        OnOpenOriginAutoComplete: function(e) {

            debugger;
            var target = $(e.sender.element).data("kendoAutoComplete");
            target.list.width(280);
        },
        SaveAirRequest: function(e) {
            debugger;


            if ($("#APISForm").kendoValidator().data("kendoValidator").validate()) {
                if (validateAirRequestForm()) {

                    kendo.ui.progress($("#AirRequest"), true);
                    var data = {
                        airRequestData: e.data //AirRequestViewModel.AirItem.AirVMList
                    }
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        traditional: true,
                        data: JSON.stringify(data),
                        url: rootUrl("SearchAvailability/AirRequestMVVMSave"),
                        success: function(response) {
                            debugger;
                            if (response.Error == null) {
                                RefreshServiceElements();
                                $("#AirRequest").data("kendoWindow").close();

                            } else {
                                ShowKendoMessage("Error: " + response.Error);
                                AirRequestViewModel.AirItem.AirVMList.Error = null;

                            }
                            kendo.ui.progress($("#AirRequest"), false);
                        }
                    });
                }
            } else {
                ShowKendoMessage("Please Enter Required Fields");
            }

        },
        AddSegment: function(e) {
            debugger;
            // this.AirVMList.SegmentInfo.push(new this.AirVMList.SegmentInfo());
            //AirRequestViewModel.AirItem.AirVMList.SegmentSkeleton
            var object = JSON.stringify(AirRequestViewModel.AirItem.AirVMList.SegmentSkeleton);
            object = JSON.parse(object);
            AirRequestViewModel.AirItem.AirVMList.SegmentInfo.splice(parseInt(e.data.index + 1), 0, object);
            var prevDestination = AirRequestViewModel.AirItem.AirVMList.SegmentInfo[parseInt(e.data.index)].ArriveDepartDetails.Destination;
            AirRequestViewModel.AirItem.AirVMList.SegmentInfo[parseInt(e.data.index + 1)].ArriveDepartDetails
                .set("Origin", prevDestination);
            //AirRequestViewModel.AirItem.AirVMList.SegmentInfo.push(AirRequestViewModel.AirItem.AirVMList
            //    .SegmentSkeleton);
            for (var i = 0; i < AirRequestViewModel.AirItem.AirVMList.SegmentInfo.length; i++) {
                this.AirVMList.set("SegmentInfo[" + i + "].index", i);
            }
        },
        RemoveSegment: function (e) {
            debugger;
            AirRequestViewModel.AirItem.AirVMList.SegmentInfo.splice(e.data.index, 1);
            for (var i = 0; i < AirRequestViewModel.AirItem.AirVMList.SegmentInfo.length; i++) {
                this.AirVMList.set("SegmentInfo[" + i + "].index", i);
            }
        },
        ShowSegmentOptions: function (e) {
            debugger;

        },
        FlightOriginOnOpen: function (e) {
            debugger;
            //var target = $(e.sender.element).data("kendoDropDownList");
            //target.list.width(280);
        },
        ResetAirItem: function (e) {
            debugger;
            e.data.ArriveDepartDetails.set("Origin", null);
            e.data.ArriveDepartDetails.set("Destination", null);
            e.data.ArriveDepartDetails.set("DepartureDate", null);
            e.data.ArriveDepartDetails.set("TimeType", "-1");
            e.data.ArriveDepartDetails.set("DepartureTime", "00:00");
            e.data.ArriveDepartDetails.set("via", []);
            e.data.set("AirlineIds", []);
            e.data.set("ClassCodeId", null);
            e.data.set("FlightNumber", null);
            e.data.set("Alliance", null);
            e.data.set("Note", null);


        },
        HideSegmentOptions: function (e) {
            debugger;
            $(e.toElement).closest(".segmentdiv").find(".tobehidden").toggle();

            $(e.toElement).closest(".segmentdiv").find("#flipdown").toggle();
            $(e.toElement).closest(".segmentdiv").find("#flipup").toggle();
        },
        CancelAirRequest: function (e) {
            debugger;
            $("#AirRequest").data("kendoWindow").close();
        }



    });

    $.when(
            $.ajax({
                url: rootUrl("SearchAvailability/GetAirRequestJSONData"),
                type: "POST",
                dataType: "json",
                data: { requestId: $("#RequestID").val() }
            }),
            loadTemplate("Content/Templates/AirRequestViewModelNew.tmpl.htm")
        )
        .then(onAirRequestWindowSuccess(airRequestViewModel))
        .fail(onAirRequestWindowFailure);
}

 

All Datasource to etc. When select option any autocomplete or all other  send read/filter request to . I  know why its happening.  

[Neeraj]

This is Template. is loading  like When write something on autocomplete all other send read()

<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div class="segmentdiv">
        <!--<div class="air-request-bottom-margin" data-bind="source: ArriveDepartDetails" data-Template="ArrivalDepartTemplate"></div>-->
        <div class="air-request-bottom-margin">
            <label style="width:37px;">From </label>:
            <input type="text" class="flight-origin" data-role="autocomplete" required="required" validationMessage="From is required"
                   data-min-length="2" data-text-field="Code" data-highlight-first="true" name="from"
                   data-template="AirportTemplate" data-value-primitive="true"
                   data-bind="value: ArriveDepartDetails.Origin, source: FlightOriginSource,events:{open: OnOpenOriginAutoComplete}" />
            <span class="k-invalid-msg" data-for="from"></span>

            <label style="width:15px;">To </label>:
            <input type="text" data-role="autocomplete" class="flight-origin" required="required" validationMessage="To is required"
                   data-min-length="2" data-value-primitive="true" data-highlight-first="true" name="to"
                   data-text-field="Code" data-template="AirportTemplate"
                   data-bind="value: ArriveDepartDetails.Destination,
                              source: FlightDestinationSource,events:{open: OnOpenOriginAutoComplete}" />
            <span class="k-invalid-msg" data-for="to"></span>

            <input data-role="datepicker" data-format="dd-MMM-yyyy" required="required" name="deptdate" validationMessage="Date is required"
                   data-parse-formats="['dd-MMM-yyy','dd-MMM-yy','dd.MM.yyyy','dd.MMM.YYYY','dd.mm.yy','dd.MMM.yy','ddMMyyyy','ddMMyy','ddMM','ddMMM','dd-MM-yyyy hh:mm:ss']"
                   data-bind="value: ArriveDepartDetails.DepartureDate" /> <!--DepartureDateToDisplay-->

            <input data-role="dropdownlist"
                   data-text-field="Text" class="time-type"
                   data-value-field="Value"
                   data-value-primitive="true"
                   data-bind="value: ArriveDepartDetails.TimeType,
                       source: TimeTypeSource,events:{dataBound: TimeTypeDataBound} " />

            <input data-role="timepicker" data-format="HH:mm" data-bind="value: ArriveDepartDetails.DepartureTime" style="width:75px;" />

            <i id="flipdown" style="display:none" data-bind="click: HideSegmentOptions" class="expandAirOptions fa fa-chevron-down hand flip-arrow"></i>
            <i id="flipup" class="expandAirOptions fa fa-chevron-up hand flip-arrow" data-bind="click: HideSegmentOptions"></i>
            <i class="reset_request_air_form fa fa-undo reset-air-request" data-bind="click: ResetAirItem"></i>


            <button type="button" data-bind="click: RemoveSegment" class="k-button delete_request_air_form trash-button">
                <i class="fa fa-trash-o trash"></i>
            </button>



        </div>
        <div class="air-request-bottom-margin tobehidden">
            <!--#= JSON.stringify(ArriveDepartDetails.via) #-->
            <label style="width:37px;">Via </label>:
            <select class="request-via-multiselect" data-role="multiselect" data-max-selected-items="2"
                    data-value-primitive="true" data-item-Template="AirportTemplate" data-text-field="Code"
                    data-value-field="Code" data-bind="value: ArriveDepartDetails.via, source: ViaSource"></select>

            <label style="width:62px;">Airline(s)</label>
            <select class="request-airline-multiselect" data-role="multiselect" data-max-selected-items="6"
                    data-value-primitive="true" data-item-Template="AirlineTemplate" data-text-field="airline_value"
                    data-value-field="AirlineID" data-bind="value: AirlineIds, source: AirlineIdsSource"></select>

        </div>
        <div class="air-request-bottom-margin tobehidden">
            <label style="width:36px;">Class </label>:

            <input class="cabin-class" data-role="dropdownlist"
                   data-text-field="Text"
                   data-value-field="value"
                   data-value-primitive="true"
                   data-bind="value: ClassCodeId,source: ClassSource" />

            <label>Flight No</label>: <input type="text" data-bind="value: FlightNumber" class="flight-number k-textbox" />
            <label>Alliance</label>:
            <input data-role="dropdownlist"
                   data-text-field="Name"
                   data-value-field="Id"
                   data-option-label="None"
                   data-value-primitive="true"
                   data-bind="value: Alliance,source: AllianceSource" />

        </div>
        <div class="air-request-bottom-margin tobehidden">
            <label class="note">Note </label>:
            <input id="simple-input" type="text" class="k-textbox" data-bind="value: Note" style="width: 626px;" />
        </div>
        <div class="air-request-bottom-margin">
            <button type="button" data-bind="click: AddSegment" class="k-button ghost_air_request_cancel btn_air_request_add_flight add-flight-button">
                <i class="fa fa-plus add-flight-plus"></i>Add Flight
            </button>
        </div>
    </div>
</script>

[Veselin Tsvetanov]

Hi Neeraj,

May I ask you to prepare and send us a small isolated runnable sample reproducing the problem observed? Please, remove any external dependencies and database calls (if any). Also, make sure that the sample is fully runnable.

May I also ask you to explain a bit in detail what exactly is the issue faced? Does the typing in an AutoComplete triggers all read actions of all DataSources? Is it something else?

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

Hi Veselin,
               I have created fiddle but in that $.extend in javascript  seem to work as   There is autocomplete in template with class "flight-origin" . on select of option in autocomplete all server send read request to there own urls

https://jsfiddle.net/hnueapss/

[Neeraj]

and tell me way to add merger  to already created observable.

is this correct way? 
var vm = kendo.observable($.extend(true, observableModel, nonObservableModel));

[Veselin Tsvetanov]

Hello Neeraj,

I am afraid, that I was not able to observe the behaviour of the AutoComplete widgets on the same sent. Here you will find a short sreencast of running that sample. It loads a Kendo Window with two buttons. I have tried clicking both of them, but the AutoComplete does not appear on the page.

May I ask you to further modify the sample sent so it reveals the issue observed? Also, can you explain, in details what is the problem faced?

Concerning your last question, if you need to extend an observable, which is already bound to a view, in order to display the changes in the view, you will need to unbind it first. Then you could extend the observable you need and bind the new object back to the view:

kendo.unbind($("#view"));

var nonObservableModel = {
    test: "This is from non observable."
};

$.extend(viewModel, nonObservableModel);
kendo.bind($("#view"), viewModel);

Here you could find a simple Dojo, demonstrating the above implementation.

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

I have altered the sample as per my here is the link: https://dojo.telerik.com/UqaKOz/4

   It is using kendo MVVM. it has multiple kendoScript As it is not rendering  but it renders kendoWindow in my VisualStudio project

[Neeraj]

[quote]Neeraj said have altered the sample as per my here is the link: https://dojo.telerik.com/UqaKOz/4

   It is using kendo MVVM. it has multiple kendoScript As it is not rendering  but it renders kendoWindow in my VisualStudio project[/quote]

in this link  The Datasource is of products (taken from Server Filter Demo of  just to make scenario work)

[Veselin Tsvetanov]

Hi Neeraj,

I am afraid that I was not able to run the sample sent (attached you will find a video testing the sample). May I ask you to review the Dojo and send us a runnable version of it?

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

is there any easy way to debug when working with kendo and remote templates? sometimes its hard to locate error origin

[Neeraj]

When run  get error. There is no integration 

[Neeraj]

Error resolved : Check this link   https://dojo.telerik.com/UqaKOz/7

[Neeraj]

have used your products DataSource given in AutoComplete  Can you help me bind that ?

[Veselin Tsvetanov]

Hello Neeraj,

I was able to resolve the "n is not a function" error in the Dojo sent by specifying an OnOpenOriginAutoComplete handler for the open events of the two AutoComplete widgets:

var airRequestViewModel = kendo.observable({
   OnOpenOriginAutoComplete: function(e) {},
.........

Here you could find a modified version of the Dojo sent loading properly the data from the remote.

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

  1) is there any better way to debug to find error source.? 
2) can we use ' this ' in dataSource?

[Neeraj]

Hello Veselin, am not able to recreate the scenario which illustrates my question made some changes in 
       What happens is when select one of kendo UI some elements get empty like . and additionally in my other UI elements send Read() request to .
      How you made that low size  please tell me the name and will send scenario to get clear view of what's happening

[Neeraj]

Hello,
        I have recorded my please have a view my attached file. it also contains template file and that  and also .swf file 

[Veselin Tsvetanov]

Hello Neeraj,

I am afraid that I was not able to properly understand the issue faced and the required result.

I suppose, that you are using an automated translation tool or a spell checker which corrupts the messages sent. Therefore, I would like to ask you to explain the problem faced in a short bullet list. Please, keep the steps and the sentences simple and short. Also, if possible, ask another team member with advanced knowledge of English to review the message prepared.

Moreover, a fully runnable sample (with no external references and no remote DataSource calls) will help us understand better the case. It will also provide us with the possibility to troubleshoot the problem locally.

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

Hello Veselin,
         I hope that you saw the video in flash(.swf) format . That speaks for itself but let me point out the problems as you said.

Video description:  It contains demo that shows when item from autoComplete or Multiselect is selected and if i select item from dropdownList then, the selected item in MultiSelect vanishes.

Problems in my project that i need to be rectified are as follows:

1. When i select item from dropdown / autocomplete , all UI elements (autocomplete/dropdownList) send Read() request again to server continously.
2. I have used 'this' keyword as  : data-bind:"source: this"     is it correct way?
   
   

 

 

[Veselin Tsvetanov]

Hello Neeraj,

Thank you for the detailed explanation of the issue, which I was able to observe on the video sent. Can you also prepare and send us a fully runnable sample reproducing the described scenario? I am afraid, that I was not able to run the sample, that you have sent to me.

Regards,
Veselin Tsvetanov
Progress Telerik