Call a render

[Dimitar]

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. 

 

 

[Dimitar]

I have fixed my issue with FlexboxLayout .

[Dimitar]

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. 

[Nikolay Tsonev]

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 -core-modules, runtime, -pro- 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

[Dimitar]

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>

 

[Nikolay Tsonev]

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

[Dimitar]

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.

[Nikolay Tsonev]

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

[Dimitar]

Ok, thank you. The issue exist also for WrapLayout . I will try with this which you send me. 

[Dimitar]

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, 

[Nikolay Tsonev]

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

[Dimitar]

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>

[Dimitar]

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  

[Nikolay Tsonev]

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

[Dimitar]

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 

[Nikolay Tsonev]

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

[Nikolay Tsonev]

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