Call a render

Thread is closed for posting
17 posts, 0 answers
  1. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 05 Jan Link to this post

    Hi, 

    Is there a way to force  component render to be executed. It' seems it loaded the data , but because of the resizing not showing the data. 

    If I use width property the data is visible but if there is not defined width , after applying new data nothing displayed. So I suppose if I could call re-render the component will fix the problem . It es for the RadListVIew when updating an item. 

     

     

  2. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 05 Jan Link to this post

    I have fixed my issue with FlexboxLayout .
  3. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 05 Jan Link to this post

    It works only for Android , not for iOS . Te issue is that doesn't recalculate the needed space for the new changed string for example. 
  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 08 Jan Link to this post

    Hi Dimitar,

    Thank you for contacting us.
    ABout your issue with RadListView item resizing I would suggest using the refresh method and to call it when the new data is attached to the ListView. For example:
    export function yourMethod(args){
    let page:Page = <Page>args.object.page;
    let listview:RadListView= <RadListView>page.getViewById("yourlistviewId");
    listview.refresh();
    }

    However, it would help if you can provide some more info about your environment(CLI tns-core-modules, runtime, nativescript-pro-ui versions) and sample project, which could be used for reproducing the problem.

    Let me know if the above-given suggestion solves the issue.

    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.
  5. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 11 Jan in reply to Nikolay Tsonev Link to this post

    Hi Nikolay , 

    I though it's working , but not . The issue is happen only for iOS . Refresh doesn't help. So the issue is not with no updated data-source . Its more related to the wrap layout , which should recalculate the new size , so instead recalculate the new size it's adding "..." or if the new string is shorter there is an empty spaces .  More or less I have this code inside of the RadListView.itemTemplate  which causes the issue , tried with all variants adding width ="100%" . 

    <StackLayout orientation="horizontal" width="100%" >
         <FlexboxLayout flexWrap="wrap" >
             <Label fontSize="20" text="{{itemFirst_name}}"
             margin="0 0 0 0"       
             />
              
             <Label fontSize="20" text="{{itemLast_name}} "
             margin="0 10 0 5"
             />
         </FlexboxLayout>
     </StackLayout>

     

  6. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 12 Jan Link to this post

    Hello Dimitar,

    Thank you for the sample code snippet.

    If I understand you correctly the issue in your code is related with displaying a long text in the Label, which in your project is cut at the end and instead of the text are shown dots("...").

    To resolve this case you need to setup textWrap property to true on the Label. For example:
    <StackLayout orientation="horizontal" width="100%" >
         <FlexboxLayout flexWrap="wrap" >
             <Label fontSize="20" textWrap="true" text="{{itemFirst_name}}"
             margin="0 0 0 0"      
             />
               
             <Label fontSize="20" textWrap="true" text="{{itemLast_name}} "
             margin="0 10 0 5"
             />
         </FlexboxLayout>
     </StackLayout>

    if the case is different or the issue still persists, please provide sample project, which could be used for debugging.
    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.
  7. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 12 Jan Link to this post

    Hi Nikolay, 

    Yes you understand me correctly. Now I have tried with textWrap="true" , but as a result now just don't show the new changed text, it shows the old one.  

    In general the case is a list with the fields for first name and last name it . There are one after other so there is no fixed width size for them. When do changes the first name to be longer it seems when textWra = "false" shows "..." at the end instead of the new changed value . If we changed first name to be shorter in this case there adding additional empty spaces.  For the textWrap="true" just don't shows the new changed text.

  8. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 12 Jan Link to this post

    Hello Dimitar,

    I tested further this case and indeed on reload of the ListView data the Label's text will not be wrapped properly. In my investigation, I found that this issue might be related to the FlexboxLayout. Regarding that, I logged a new issue and we will investigate what is the reason for this strange behavior. For further info, I would suggest keeping track on the issue.

    In the meantime, I would suggest replacing the FlexboxLayout with another one. For example, you could use StackLayout.
    <StackLayout orientation="horizontal" width="100%" >
         <StackLayout >
             <Label fontSize="20" textWrap="true" text="{{itemFirst_name}}"
             margin="0 0 0 0"     
             />
                
             <Label fontSize="20" textWrap="true" text="{{itemLast_name}} "
             margin="0 10 0 5"
             />
         </StackLayout >
     </StackLayout>
     For your convenience, I am attaching a sample project.

    Hope this helps
    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.
  9. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 12 Jan Link to this post

    Ok, thank you. The issue exist also for WrapLayout . I will try with this which you send me. 
  10. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 12 Jan Link to this post

    For regrets this is not resolving my case.  I needed to implement first and last name to be an one line and only in case there are super long than the first name to be on first line and last name to be on next line, 
  11. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 15 Jan Link to this post

    Hello Dimitar,.

    Thank you for writing us back.

    The example that I send to you in my previous comment was to demonstrate that both labels will be displayed properly while the StackLayout is used and the text is changed dynamically.

    Regarding the needed approach the best solution that I could offer at this time for displaying the last and the first name in your project is to use formatted string and to set up the names in separated Spans. For example:
    <lv:RadListView.itemTemplate>
     
                    <StackLayout orientation="horizontal" width="100%" >
                        <Label textWrap="true">
                            <Label.formattedText>
                                <FormattedString>
                                    <FormattedString.spans>
                                        <Span text="{{itemName}}"></Span>
                                        <Span text="{{itemDescription}}"></Span>
                                    </FormattedString.spans>
                                </FormattedString>
                            </Label.formattedText>
                        </Label>
                         
                    </StackLayout>
                </lv:RadListView.itemTemplate>


    Hope this will help.


    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.
  12. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 15 Jan Link to this post

    Hello, thank you . 

    Finally this is the code which seems works in my case : 

    <FlexboxLayout flexWrap="wrap" width="100%" >
        <Label textWrap="true" width="100%">
            <Label.formattedText>
                <FormattedString>
                    <FormattedString.spans>
                        <Span text="{{itemFirst_name}}" width="100%"></Span>
                        <Span text="{{ ' ' + itemLast_name}}" width="100%"></Span>
                    </FormattedString.spans>
                </FormattedString>
            </Label.formattedText>
        </Label>                    
    </FlexboxLayout>
  13. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 15 Jan Link to this post

    Just one more question.When first and last names are longer is going to the next line , but the distance between the lines is too much. How I could change this  
  14. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 15 Jan Link to this post

    Hi Dimitar,

    You could try setting up the lineHeight property to the Label. This property should allow you to specify the space between the lines.

    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.
  15. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 15 Jan Link to this post

    Hi Nikolay ,  Doesn't help . I mean the min value is 0, but this actually is the same situation. This will work if I want to increase the distance between lines but not in a case to make them closer 
  16. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 16 Jan Link to this post

    Hi Dimitar,

    We research the case, however, we found that the indeed lineHeight is set up to it is minimum value and by default, it will be 0. Regarding that, the line spacing could not be changed and it could not be less than the default one.

    Something that I would suggest is to set up the fontSize, which will also minimize the line space and to add some extra margin for the ListView items. For example:
    <lv:RadListView.itemTemplate>
     
                    <GridLayout class="m-5" orientation="horizontal" width="100%" >
                        <Label fontSize="8" textWrap="true">
                            <Label.formattedText>
                                <FormattedString>
                                    <FormattedString.spans>
                                        <Span text="{{itemName}}"></Span>
                                        <Span  text="{{itemDescription}}"></Span>
                                    </FormattedString.spans>
                                </FormattedString>
                            </Label.formattedText>
                        </Label>
                         
                    </GridLayout>
                </lv:RadListView.itemTemplate>


    For your convenience, I am attaching sample images for both iOS and Android

    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.
  17. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 29 Jan Link to this post

    Hello Dimitar,


    I would like to let you know that we are closing UI for NativeScript Forum section in Telerik Admin in favor of NativeScript forum
    Since UI for NativeScript is free for using we consider that the best place for discussions and for questions will be the official NativeScript forum.

    Thank you in advance for cooperation.

    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.
Back to Top