Grid Column Not Fixed Width in DataTemplate

[Raymond]

Using v2019.3.1119.1 of the Telerik Controls for Xamarin I use the following grid layout in my data template to display a list of jobs for a driver;

<DataTemplate x:Key="JobItemTemplate">
    <Grid
        RowSpacing="0"
        Padding="0"
        Margin="0"
        BackgroundColor="{Binding Item.JobStatus, Converter={StaticResource StringToColourConverter}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="1" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="40" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" ... />

        <Label
            Grid.Row="0"
            Grid.Column="1"
            Text="{Binding Item.JobLine1}"
            TextColor="{StaticResource DarkSlateGrey}"
            FontSize="17"
            Margin="0,2,0,0" />

        <Label Grid.Row="1" Grid.Column="1" ... />

        ...

        </Grid>
    </Grid>
</DataTemplate>

 

This would display the sequence number of the job, the address line, then the expander icon to collapse or expand the item to display further details.  If the address line was longer than the width of column then it would wrap toa new line.

After upgrading the controls to v2020.3.916.1 the width of the address column behaves like "auto" instead of "*" - the addresses contract or expand without wrapping and the width of the "item" would also adjust accordingly giving a ragged right edge.

I have attached some screenshots to show the result before and after the upgrade.

[Yana]

Hello Raymond,

We've made some improvements to the TreeView in R1 2020 in order to enable horizontal scrolling, I guess that lead to the difference you've observed.

Still, I have tried the provided template and couldn't reproduce the behavior shown in the screenshot. I have attached my test project, could you download it and give it a try? Can you modify the template, so that the issue can be replicated and send it back to me for additional research?

I look forward to your reply.

Regards,
Yana
Progress Telerik

[Raymond]

Hi Yana,

I tried your code using the following;

RunVm run1 = new RunVm()
{
    RunName = "Run 1",
    Jobs = new ObservableCollection<JobVm>()
    {
        new JobVm { JobStatus = "status 1", JobLine1 = "jobline 1"},
        new JobVm { JobStatus = "status 2", JobLine1 = "jobline with longer text 1"},
        new JobVm { JobStatus = "status 2", JobLine1 = "jobline 3 completed"},
        new JobVm { JobStatus = "status 1", JobLine1 = "jobline 4 takes more than expected jobline 4 takes more than expected jobline 4 takes more than expected"}

    }
};

and line 4 didn't wrap - it just extended off screen to the right.

Couldn't attach a screenshot as there is no "attach" option in replies.

[Yana]

Hello Raymond,

Thanks for the update, now I understand what you mean with the different behavior.   Indeed, the reason behind is the feature request for enabling horizontal scrolling of the TreeView ( you can check it here: https://feedback.telerik.com/xamarin/1388501-treeview-enable-horizontal-scrolling). 

Now we need to measure the items' width and items are not expanded to the full width of the TreeView.  I am afraid this is expected behavior as a result of the provided horizontal scrolling functionality.

In order to achieve the previous behavior, you would need to modify the ItemTemplate a little bit - for example, you can set static Width to the main Grid inside the template. You can take the page width and set it as item width:

<DataTemplate x:Key="JobItemTemplate">
    <Grid WidthRequest="{Binding MainPage.Width, Source={x:Static Application.Current}}"
        RowSpacing="0"
        Padding="0"
        Margin="0"
        BackgroundColor="LightYellow">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="1" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="40" />
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.RowSpan="3" Grid.Column="0"  />

        <Label
            Grid.Row="0"
            Grid.Column="1"
            Text="{Binding Item.JobLine1}"
            TextColor="DarkGray"
            FontSize="17"
            Margin="0,2,0,0" />
        <Label Grid.Row="1" Grid.Column="1"  />
    </Grid>
</DataTemplate>

As to the attachments - in our forums only image attachments are allowed. If you need to sends other types of files, such as a project zip file), you would need to open a private support ticket and attach it there. 

Let me know if I can assist with anything else.

Regards,
Yana
Progress Telerik