[DataForm]Picker editor appears to have a default selected value, but actually doesn't.

[MartoYankov]

Tell us about the problem

RadDataForm Picker editor appears to have a default selected value, but actually doesn't.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: 3.2.0
• CLI: 3.3.1
• Cross-platform modules: 3.3.0
• Runtime(s): 3.3.1

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

The following setup displays the 'male' option as initially selected, while in the 'registrationForm' backend property the value is still an empty string. This is a problem, because it can make the user not use the editor. I would expect the editor to have an empty initial value visually. When the user selects one option, he shouldn't be able to select the empty option again.

<RadDataForm #registrationFormElement [source]="registrationForm">
        <TKEntityProperty tkDataFormProperty name="gender" displayName="Gender" hintText="Pick a gender" required="true" index="0"
            valuesProvider="male, female">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
</RadDataForm>

[tgpetrov]

Hi @MartoYankov

This is expected behavior. By design, the picker always displays a value. In order to sync the value, you are expected to have the default value present in your source object, meaning the value of gender in registrationForm should be the first value in the list (in your example that is male) and the values will always be in sync.

If you need to have an "empty" value, you can add an empty string to the list in your valuesProvider and in order to not allow it as valid, you can add a NonEmptyValidator. I have attached a sample in the NativeScript Playground as a demonstration.

[MartoYankov]

@tgpetrov Thanks, I already did that. It just looked to me like a workaround, not the expected behavior and that's why I reported it. If this is the case, then you can close the issue.

[tgpetrov]

The expected behavior by design is that the picker always has a selected item which is one from the provided list. The workaround to have an empty is to add a dummy empty value to the source. It is great that you reported it, so anyone else wondering about the same could read about it. Thanks.

[ppyoosuf]

How i can add '--select gender--' as a default selected label ? and should support the nonempty validation

[yalva]

Hi @MartoYankov

This is expected behavior. By design, the picker always displays a value. In order to sync the value, you are expected to have the default value present in your source object, meaning the value of gender in registrationForm should be the first value in the list (in your example that is male) and the values will always be in sync.

If you need to have an "empty" value, you can add an empty string to the list in your valuesProvider and in order to not allow it as valid, you can add a NonEmptyValidator. I have attached a sample in the NativeScript Playground as a demonstration.

Thank you for the solution, how does this work with number editor? for numeric fields editor shows 0 even though actual value is null in the source, how do we make it show empty if its null value?

[yalva]

Hi @MartoYankov This is expected behavior. By design, the picker always displays a value. In order to sync the value, you are expected to have the default value present in your source object, meaning the value of gender in registrationForm should be the first value in the list (in your example that is male) and the values will always be in sync. If you need to have an "empty" value, you can add an empty string to the list in your valuesProvider and in order to not allow it as valid, you can add a NonEmptyValidator. I have attached a sample in the NativeScript Playground as a demonstration.

Thank you for the solution, how does this work with number editor? for numeric fields editor shows 0 even though actual value is null in the source, how do we make it show empty if its null value?

Also if we select dummy value, validation is passing through, isn't there a better way to do this?