Adding Complex Item in Observable array

8 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 03 Aug Link to this post

    I am using MVVM . The Parent object is set as kendo.Observable . Inside there is Complex object SegmentInfo which is Array of Complex type.

     

    1) What would be easiest way to add Item/remove item  to SegmentInfo ?

               I tried below code for adding item but didnt worked :
                 this.AirVMList.SegmentInfo.push(new this.AirVMList.SegmentInfo());

     

    2) I want the first item of SegmentInfo Array not to have Remove button while if array length is more than 1 then other item should render Remove button. How can i achieve that?


    Below is Template code: 

    AirRequestViewModel = kendo.observable({
        AirItem: {
            AirVMList: @Html.Raw(Json.Encode(Model)),
            FlightDestinationSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: rootUrl("GetData/GetCountry"),
                        dataType: "jsonp"
                    }
                },
                serverFiltering: true
            }),
            AddSegment: function(e) {
                debugger;
                this.AirVMList.SegmentInfo.push(new this.AirVMList.SegmentInfo());
            },
            ToggleShowSegmentOptions: function(e) {
                debugger;
                
            },
           SaveAirSegment: function(e) {
                debugger;
                
            }
        }
        
    });

     

     

    Here is JSON stringified of that object :

    "{"AirVMList":{"RequestID":30852,"ReservationRequestItemID":0,"SegmentInfo":[{"Pnr":null,"IsEnable":false,"IsHidden":false,"FareBasis":null,"MiniRuleXML":null,"FullRuleXML":null,"NewClass":[],"lkpStatus":null,"ArriveDepartDetails":{"DepartureDate":null,"ArrivalDate":null,"ArrivalTime":null,"TimeType":"-1","DepartureTime":null,"NumberOfStops":null,"Origin":null,"ViaAirports":[],"via":[],"Destination":null,"ArrivalTerminal":null,"DepartureTerminal":null,"WeekDayNumber":null,"DepartureTimeToDisplay":"","DepartureDateToDisplay":"","ArrivalTimeToDisplay":"","ArrivalDateTime":"/Date(-62135596800000)/","DepartureDateTime":"/Date(-62135596800000)/"},"ID":0,"Note":null,"CabinClass":null,"NewCabinClass":null,"ClassDescription":null,"ClassCodeId":null,"Alliance":null,"isFlown":false,"PCCInfo":{"BookingPccId":0,"BookingPCCCode":null,"CurrencyCode":null,"PricingPccId":null,"PricingPCCCode":null},"BookingOfficeID":0,"BookingOfficeCode":null,"ValidatingCarrierCode":null,"FlightNumber":null,"FlightDuration":null,"MarketingCompanyCode":null,"OperatingCompanyCode":null,"AirlinesFilter":[],"AirlineIds":[],"OperatingCompany":{"AirlineID":null,"airline_value":null,"airline_name":null,"airline_text":null,"AllianceID":null},"ValidatingCompany":{"AirlineID":null,"airline_value":null,"airline_name":null,"airline_text":null,"AllianceID":null},"MarketingCompany":{"AirlineID":null,"airline_value":null,"airline_name":null,"airline_text":null,"AllianceID":null},"SortOrder":0,"SegmentNumber":null,"isSelectedToPrice":true,"Connected":0,"ReservationRequestItemID":0,"ReservationRequestID":0,"OfficePNRTSTID":0,"TstReferenceNumber":null,"Equipment":null,"Quantity":null,"AirlineLocator":null,"Status":null,"TypeDetail":null,"ChangeOfEquipment":false,"OfficePNRID":null,"Qualifier":null,"SegmentName":null,"LineNumber":null,"SegmentDetailsToDisplay":"                 ","SegmentDetailsToDisplayPricing":"    "}]},"FlightDestinationSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":true,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"progress":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"table":null},"FlightOriginSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":true,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"progress":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"table":null},"ViaSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":true,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"progress":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetCountry","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"fields":[{"field":"Code"},{"field":"Code"}],"table":null,"_requestInProgress":false},"AirlineIdsSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":true,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetAirLines","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"progress":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetAirLines","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"fields":[{"field":"airline_value"},{"field":"AirlineID"}],"table":null,"_requestInProgress":false},"ClassSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":true,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/Get_Air_Class_Details","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"requestStart":[null],"requestEnd":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/Get_Air_Class_Details","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"table":null,"_requestInProgress":false},"AllianceSource":{"options":{"data":null,"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":false,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetAlliance","dataType":"jsonp"}}},"_map":{},"_prefetch":{},"_data":[],"_pristineData":[],"_ranges":[],"_view":[],"_pristineTotal":0,"_destroyed":[],"_group":[],"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"requestStart":[null],"requestEnd":[null],"error":[null]},"transport":{"options":{"read":{"url":"http://localhost:59581/(S(pg0arg24gujfart2pao3owg5))/GetData/GetAlliance","dataType":"jsonp"}},"cache":{}},"reader":{},"_online":true,"select":null,"table":null,"_requestInProgress":false},"TimeTypeSource":{"options":{"data":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}],"schema":{},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":false,"serverGrouping":false,"serverAggregates":false,"batch":false},"_map":{},"_prefetch":{},"_data":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}],"_pristineData":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}],"_ranges":[{"start":0,"end":3,"data":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}],"timestamp":1501735038827}],"_view":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}],"_pristineTotal":3,"_destroyed":[],"_group":[],"_total":3,"_shouldDetachObservableParents":true,"_events":{"change":[null,null],"requestStart":[null],"requestEnd":[null],"error":[null]},"transport":{"data":[{"Text":"None","Value":"-1"},{"Text":"Departs","Value":"D"},{"Text":"Arrives","Value":"A"}]},"reader":{},"_online":true,"select":null,"table":null,"_requestInProgress":false,"_aggregateResult":{}}}"
  2. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 04 Aug Link to this post

    Hi,

    You can refer to this online demo where a similar scenario have been implemented. As for the remove button you can use the invisible binding that is described here.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 04 Aug in reply to Plamen Link to this post

    Hi Plamen, my object contains another object which has 6-7 properties. Do you know any other way?
  4. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 04 Aug Link to this post

    Hi Plamen, my object contains another object which has 6-7 properties. Do you know any other way? I am using ASP.NET MVC Project
  5. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 08 Aug Link to this post

    Hi,

    I have tested the same sample dojo with adding an object as a property for unitsInStock ant it still worked correctly. Would you please elaborate what else are you trying to achieve so we could inspect it and be more helpful with a possible solution?

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 09 Aug Link to this post

    Hey Plamen,
                     I have created default object called " SegmentSkeleton " which consist object with initial values.  I am trying to use below code on inside function when we add new object in SegmentInfo 

    this.AirVMList.get("SegmentInfo").push(this.AirVMList.SegmentSkeleton.toJSON())

    it throws error "Uncaught TypeError: Function(...) is not a function"  

  7. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 09 Aug Link to this post

    this worked 

    AirRequestViewModel.AirItem.AirVMList.SegmentInfo.push(AirRequestViewModel.AirItem.AirVMList.SegmentSkeleton)

     please tell me why it worked without 'this' keyword 
  8. Joana
    Admin
    Joana avatar
    128 posts

    Posted 11 Aug Link to this post

    Hello Neeraj,

    I am glad that you have achieved the desired scenario.

    From the provided code, it is not clear what is the context of the this keyword, but most probably it refers to the window object at the moment of usage and that's why the error occurs.

    Let me know if you need further assistance.

    Regards,
    Joana
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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