Change an Entity's value based on the value of another Entity

2 posts, 0 answers
  1. Vince
    Vince avatar
    3 posts
    Member since:
    Apr 2017

    Posted 10 May Link to this post

    Is it possible to change the value of an Entity when another Entity changes? For instance, in the example here, it seems intuitive that increasing the number of tickets should increase the price. However, this is not the behavior that occurs in the example currently. Is this behavior currently possible to implement? 
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 11 May Link to this post

    Hello,

    First of all, thank you for your interest in UI for NativeScript.

    For this case, at the moment the possible way to change the value of the field related to the value of the other one is to change the source of the component.
    You could handle DataForm propertyCommittedEvent and to update the field value, by creating a new object for the DataForm source. For example:

    HTML
    <StackLayout tkExampleTitle tkToggleNavButton>
        <RadDataForm  #myCommitDataForm (loaded)="onLoaded()" [source]="user" commitMode="immediate" height="400" (propertyCommitted)="onPropertyCommitted()">
            <TKEntityProperty tkDataFormProperty name="number1" index="0"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="number2" index="1">
                <TKPropertyEditor type="number"></TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>
    </StackLayout>

    TypeScript
    import { Component, OnInit, ViewChild } from "@angular/core";
    import { CommitMode } from "nativescript-telerik-ui-pro/dataform";
    import { RadDataFormComponent } from "nativescript-telerik-ui-pro/dataform/angular";
    import { SegmentedBarItem, SelectedIndexChangedEventData } from "tns-core-modules/ui/segmented-bar";
    import * as timerModule from "tns-core-modules/timer";
     
    class User {
        public number1: number = 0;
        public number2: number =0;
     
        constructor() {
        }
    }
     
    @Component({
        moduleId: module.id,
        selector: "tk-dataform-commit-modes",
        templateUrl: "dataform-commit-modes.component.html"
    })
    export class DataFormCommitModesComponent implements OnInit {
        private _commitMode;
        private _isEnabled: boolean;
        private _segmentedBarItems: Array<SegmentedBarItem>;
        private user: User;
        private _result: string;
     
        constructor() {
        }
     
        ngOnInit() {
            this.user = new User();
        }
     
        @ViewChild('myCommitDataForm') myCommitDataFormComp: RadDataFormComponent;
     
        get commitMode() {
            return this._commitMode;
        }
     
        public onLoaded() {
            this.updateFields();
        }
     
        public onPropertyCommitted(args) {
     
            this.updateFields();
        }
     
        public updateFields() {
            if (this.myCommitDataFormComp.dataForm.editedObject) {
                this._result = null;
                this._result = this.myCommitDataFormComp.dataForm.editedObject;
                var object = JSON.parse(this._result);
                console.dir(object);
                this.user = new User();
                this.user.number1=object["number1"];
                this.user.number2=object["number1"];
            }
        }
     
    }

    You could also keep track on this feature request for supporting two-way binding, which will be available for some of the next UI for NativeScript releases and will provide an easy way to change the value of a specific Entity.


    Hope this information helps.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top