Nativescript-ui-feedback: DataForm : use key-value pair in valuesProvider

[GrEg00z]

Hello

I'm using DataForm module for Nativescript UI (with Angular), and I'm facing a serious problem of functionnality.

Here is my template component code :

<RadDataForm [source]="intervention" (propertyCommit)="dfPropertyCommit($event)" (propertyCommitted)="dfPropertyCommitted($event)" commitMode="Manual" validationMode="OnLostFocus" #myForm>
<TKEntityProperty tkDataFormProperty name="city" displayName="City" index="0" valuesProvider="New York, Washington, Los Angeles">
<TKPropertyEditor tkEntityPropertyEditor type="List"></TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="My custom message"></TKNonEmptyValidator>
</TKEntityProperty>
</RadDataForm>

And my component code

export class myComponent {

private _intervention: Intervention;

constructor(private myService : InterventionService) {}

ngOnInit() {
    this._intervention = new Intervention();
}

get intervention(): Intervention {
    return this._intervention;
}

save() {
    console.log(this.intervention.city)  // will return "New York", "Washington" or "Los Angeles"
    this.myService.save(this.intervention)
     // --> Will throw an error because myService.save wait that this.intervention.city be a number
}}

I see in doc that "valuesProvider" property of TKEntityProperty is only settable with array of string.

But I have a real problem with my API requirement, that expect a key value for intervention.city property, but in my form I want to show the label value .

Here is what I get from my API and the key expected by the save method API :

[{key : 0, label : "New York"}, {key : 1, label : "Washington"}, {key : 2, label : "Los Angeles"}]

``

There is not actual way to get the "key" data associated to the items list while using valuesProvider property, and I have already post on the community forum (here) where they recommanded me to post here.

It could be great to use inside "valuesProvider", or by another way, an array of key-value pair data, instead of just an array of string.

I hope this feature will be accepted because it's a really fundamental mecanism of any dropdown, and my work really invests on this technology and it will be very necessary for our futurs developments.

Best regards

[sprattek]

+1, this feature is really important

[ginev]

@sprattek, @GrEg00z we will prioritize this request and will put it on the TODO list.

[felixkrautschuk]

Are there any updates on when this feature will be included in the official release of NativeScript Telerik UI?
We also have several use cases with dropdowns where we need to manage key-value pairs.

[tgpetrov]

We are having a release later this week and this item will be included in the planning for the next release, expected in about 6 weeks.

[felixkrautschuk]

@tgpetrov thank you for the fast feedback!

[Natalia-Hristova]

@sprattek, @GrEg00z @felix-idf

This issue is fixed and it will be available in our next official release. If you want to test it out before that you can use the "next" version of the nativescript-telerik-ui-pro plugin. Simply install that version of the plugin: tns plugin add nativescript-telerik-ui-pro@next .

NOTE that the next version is updated on daily/hourly basis from our current development brach which makes it not a good option for production applications but it is a great way to verify fixes and test new functionality.

[LauraNavarroGalvan]

I have the same problem, when I save the form, the preferedLanguage return English or Arabic but I need the key values "en" or "ar", this only happens in IOS
I'm using this versions

nativescript-ui-dataform: 3.6.0
NativeScript CLI: 4.0.2

and my code

<RadDataForm #updateUserForm [source]="profileUser" (editorUpdate)="dfEditorUpdate($event)" row="0">
     <TKEntityProperty tkDataFormProperty name="name" displayName="Full Name" index="0">
         <TKPropertyEditor tkEntityPropertyEditor type="Text">
               <TKPropertyEditorStyle tkPropertyEditorStyle ios:labelWidth="150"></TKPropertyEditorStyle>
         </TKPropertyEditor>
         <TKNonEmptyValidator tkEntityPropertyValidators></TKNonEmptyValidator>
     </TKEntityProperty>
     <TKEntityProperty tkDataFormProperty name="preferedLanguage" displayName="Preferred language" index="5" [valuesProvider]="languageAvailable">
         <TKPropertyEditor tkEntityPropertyEditor type="Picker">
               <TKPropertyEditorStyle tkPropertyEditorStyle ios:labelWidth="150"></TKPropertyEditorStyle>
         </TKPropertyEditor>
     </TKEntityProperty>
</RadDataForm>

constructor(
    private authenticationService: AuthenticationService,
    ) {
        this._updateUser = new UpdateUser();
        this.authenticationService.authorize().subscribe((userProfile) => {
            var that = new WeakRef(this);
            var _updateUser = JSON.parse(JSON.stringify(userProfile));
            that.get()._updateUser = _updateUser;
        });
     }

ngOnInit() { }

get profileUser(): UpdateUser {
        return this._updateUser;
 }
get languageAvailable() {
        if (!this._languageAvailable) {
            this._languageAvailable = [
                { key: "en", label: "English" },
                { key: "ar", label: "Arabic" }
            ];
        }
        return this._languageAvailable;
}