TKPropertyEditor placement

[Vamsi]

How to place the editor next to the label instead of the after the label. I've tried placing the TKEntityProperty in a StackLayout horizontal orientation without any luck

 

<StackLayout orientation="horizontal">
<TKEntityProperty tkPropertyGroupProperties name="q1" [converter]="valuesConverter" [valuesProvider]="valuesProvider" index="0" columnIndex="0">
<TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor">
<TKPropertyEditorStyle tkPropertyEditorStyle labelTextSize="22"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
</StackLayout>

[Nikolay Tsonev]

Hello,
If I understand you correctly you would like to structure the labels and the fields on separate columns for Android similar to the iOS implementation.

Unfortunately, this case for changing this layout structure for the label and field in a single Entity is not supported. However, this is already logged here as a feature request and it will be available for some of the next plugins versions.

For further info, you could keep track on the above-mentioned issue.
Regards,
nikolay.tsonev
Telerik by Progress

[Vamsi]

Hi Nikolay,

Thank you for the reply, I will track the issue.

Regards,

Vamsi

[Vamsi]

Hi Nikolay,

Does this feature included in the nativescript-ui, or do I need to wait for the next nativescript-ui pro release? if so when are expecting the next release?

Thank you,

Vamsi

[Nikolay Tsonev]

Hello,
Thank you for writing us back.

Indeed the feature, which allows changing the label position is already available from version 3.1.0. 
You could upgrade to the latest available version and should be able to set up the Top or Left position of the label. To upgrade you could use the following commands.

tns plugin remove nativescript-telerik-ui-pro

tns plugin add nativescript-telerik-ui-pro

After you changed the version delete node_modules and platforms folders and rebuild the app with

tns run  <platforms name>

 

More about this feature could be found here in the documentation of the plugin. A sample code could be found here for pure NativeScript project and for NativeScript Angular could be found in this repository.

Regards,
nikolay.tsonev
Progress Telerik

[Vamsi]

Hi Nikolay,

Thank you for the quick reply, I've update my nativescript-ui-pro and as you suggested deleted node_modules and platforms folders. When I ran the command tns run android I received this error

Unable to apply changes on device: 52030180c076932d. Error is: Invalid Version: https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz.

And with the tns run ios received this error.

Unable to apply changes on device: 7CB9E9D8-E006-4210-8C4B-FD1D13C36279. Error is: cp: no such file or directory: node_modules/ansi-regex/framework/*.

Thanks again.

 

 

[Vamsi]

Issue with updating of nativescript-ui-pro resolved, there was some dependency issues in package.json file.

[Vamsi]

[quote]nikolay.tsonev said:Hello,
Thank you for writing us back.

Indeed the feature, which allows changing the label position is already available from version 3.1.0. 
You could upgrade to the latest available version and should be able to set up the Top or Left position of the label. To upgrade you could use the following commands.

tns plugin remove nativescript-telerik-ui-pro

tns plugin add nativescript-telerik-ui-pro

After you changed the version delete node_modules and platforms folders and rebuild the app with

tns run  <platforms name>

 

More about this feature could be found here in the documentation of the plugin. A sample code could be found here for pure NativeScript project and for NativeScript Angular could be found in this repository.

Regards,
nikolay.tsonev
Progress Telerik

[/quote]

 

After updating the nativescript-ui-pro and recreating the platform ios below code not producing the labels on as expected

 

<TKPropertyGroup tkDataFormGroups collapsible="true" name="Patient" >
<TKEntityProperty tkPropertyGroupProperties name="nationalId" displayName="SA ID/Passport Number"
readOnly="true">
<TKPropertyEditor tkEntityPropertyEditor type="Text" length="13">
<TKPropertyEditorStyle labelPosition="Top"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<Button text="Scan"></Button>
<TKEntityProperty tkPropertyGroupProperties name="firstName" displayName="First Name">
<TKPropertyEditor tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle labelPosition="Top"></TKPropertyEditorStyle>
</TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="First Name is Mandatory"
length="1"></TKNonEmptyValidator>
</TKEntityProperty>
<TKEntityProperty tkPropertyGroupProperties name="middleName">
<TKPropertyEditor tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle labelPosition="Top"></TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>
<TKEntityProperty tkPropertyGroupProperties name="lastName">
<TKPropertyEditor tkEntityPropertyEditor type="Text">
<TKPropertyEditorStyle labelPosition="Top"></TKPropertyEditorStyle>
</TKPropertyEditor>
<TKNonEmptyValidator tkEntityPropertyValidators errorMessage="Last Name is Mandatory"
length="1"></TKNonEmptyValidator>
</TKEntityProperty>
</TKPropertyGroup>

[Vamsi]

I've set the labelPosition to Top, as you can seen from the attached screenshot labels are still being produced on left on iOS.

 

Thank you

Vamsi

[Vamsi]

I've also tested this on android by changing the labelPosition to "Top" still its placing the labels on left. 

[Vamsi]

I've also tested this on Android. Changed the labelPostion to "Top" but labels are still being produced on left.

[Vamsi]

I've also tested this on Android. Changed the labelPostion to "Top" but labels are still being produced on left.

[Vamsi]

My bad, now its working. Earlier I left "tkPropertyEditorStyle" from the tag.

<TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="Top"></TKPropertyEditorStyle>

 

Thank you for your help.