Datasource Read () in ViewModel

20 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 28 Nov 2017 Link to this post

    Hello,
                I have a function which constructs Observable ViewModel. In that ViewModel 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 are binded to autocomplete , dropdownlist etc. When i select option any autocomplete or dropdown , all other dataSources send read/filter request to server. I dont know why its happening.  














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

    Posted 29 Nov 2017 Link to this post

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

    <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>
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 30 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 30 Nov 2017 Link to this post

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

    https://jsfiddle.net/hnueapss/

  5. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 03 Dec 2017 Link to this post

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

    is this correct way? 
    var vm = kendo.observable($.extend(true, observableModel, nonObservableModel));
  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 04 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 05 Dec 2017 in reply to Veselin Tsvetanov Link to this post

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

       It is using kendo MVVM. it has multiple kendoScript template . As Output it is not rendering kendoWindow . but it renders kendoWindow in my VisualStudio project
  8. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 05 Dec 2017 in reply to Neeraj Link to this post

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

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


    in this link https://dojo.telerik.com/UqaKOz/4   . The Datasource is of products (taken from Server Filter Demo of autcomplete just to make scenario work)
  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 06 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 06 Dec 2017 Link to this post

    is there any easy way to debug when working with kendo viewmodel and remote templates? sometimes its hard to locate error origin
  11. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 06 Dec 2017 Link to this post

    When i run https://dojo.telerik.com/UqaKOz/4   , i get Facebook error. There is no facebook integration 
  12. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 06 Dec 2017 Link to this post

    Error resolved : Check this link   https://dojo.telerik.com/UqaKOz/7
  13. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 06 Dec 2017 Link to this post

    i have used your products DataSource given in AutoComplete Demo . Can you help me bind that datasource?
  14. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 08 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 13 Dec 2017 Link to this post

    Thanks Veselin , 1) is there any better way to debug to find error source.? 
    2) can we use ' this ' in dataSource?
  16. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 13 Dec 2017 Link to this post

    Hello Veselin, i am not able to recreate the scenario which illustrates my question but , i made some changes in https://dojo.telerik.com/UqaKOz/43  .
           What happens is when i select one of kendo UI elements , some elements get empty like chain reaction . and additionally in my scenario other UI elements send Read() request to server.
          How you made that low size video ? please tell me the name and i will send you my scenario to get clear view of what's happening
  17. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 13 Dec 2017 Link to this post

    Hello,
            I have recorded my scenario . please have a view to my attached file. it also contains template file and script file that i use . and also .swf file 
  18. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 15 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  19. Neeraj
    Neeraj avatar
    86 posts
    Member since:
    May 2015

    Posted 15 Dec 2017 Link to this post

    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?

     

     

  20. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    732 posts

    Posted 19 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top