TKPropertyEditor placement

13 posts, 0 answers
  1. Vamsi
    Vamsi avatar
    4 posts
    Member since:
    May 2017

    Posted 17 May Link to this post

    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>

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 18 May Link to this post

    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
    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.
  3. Vamsi
    Vamsi avatar
    4 posts
    Member since:
    May 2017

    Posted 18 May in reply to nikolay.tsonev Link to this post

    Hi Nikolay,

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

    Regards,

    Vamsi

  4. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep Link to this post

    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

  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 20 Sep Link to this post

    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
    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.
  6. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to nikolay.tsonev Link to this post

    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.

     

     

  7. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to Vamsi Link to this post

    Issue with updating of nativescript-ui-pro resolved, there was some dependency issues in package.json file.
  8. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to nikolay.tsonev Link to this post

    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
    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.

     

    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>

  9. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to Vamsi Link to this post

    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

  10. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to Vamsi Link to this post

    I've also tested this on android by changing the labelPosition to "Top" still its placing the labels on left. 
  11. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to Vamsi Link to this post

    I've also tested this on Android. Changed the labelPostion to "Top" but labels are still being produced on left.
  12. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep in reply to Vamsi Link to this post

    I've also tested this on Android. Changed the labelPostion to "Top" but labels are still being produced on left.
  13. Vamsi
    Vamsi avatar
    18 posts
    Member since:
    Apr 2017

    Posted 20 Sep Link to this post

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

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

     

    Thank you for your help.

     

Back to Top