Adding Complex Item in Observable array

[Neeraj]

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

 

1) What would be way to add Item/remove

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

 

2) I want the first item of SegmentInfo Array not to have Remove button while if length is more than 1 then should render Remove button. How can 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":{}}}"

[Plamen]

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

[Neeraj]

Hi Plamen, my object contains another object which has 6-7 properties. Do you know any other way?

[Neeraj]

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

[Plamen]

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

[Neeraj]

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  "Uncaught TypeError: Function(...) is not a function"  

[Neeraj]

this worked 

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

 please tell me why it worked without 'this' keyword 

[Joana]

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 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