This is a migrated thread and some comments may be shown as answers.

Adding Complex Item in Observable array

7 Answers 490 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 03 Aug 2017, 05:13 AM

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":{}}}"

7 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 04 Aug 2017, 11:01 AM
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.
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 04 Aug 2017, 11:23 AM
Hi Plamen, my object contains another object which has 6-7 properties. Do you know any other way?
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 04 Aug 2017, 11:24 AM
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
0
Plamen
Telerik team
answered on 08 Aug 2017, 10:27 AM
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.
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 09 Aug 2017, 10:37 AM
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"  

0
Neeraj
Top achievements
Rank 1
Veteran
answered on 09 Aug 2017, 11:08 AM
this worked 

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

 please tell me why it worked without 'this' keyword 
0
Joana
Telerik team
answered on 11 Aug 2017, 10:45 AM
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
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.
Tags
MVVM
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Plamen
Telerik team
Neeraj
Top achievements
Rank 1
Veteran
Joana
Telerik team
Share this question
or