This is a migrated thread and some comments may be shown as answers.

Grid Column Not Fixed Width in DataTemplate

3 Answers 69 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Raymond
Top achievements
Rank 1
Raymond asked on 29 Sep 2020, 02:07 AM

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.

3 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 30 Sep 2020, 01:02 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Raymond
Top achievements
Rank 1
answered on 30 Sep 2020, 10:33 PM

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.

0
Accepted
Yana
Telerik team
answered on 01 Oct 2020, 09:08 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListView
Asked by
Raymond
Top achievements
Rank 1
Answers by
Yana
Telerik team
Raymond
Top achievements
Rank 1
Share this question
or