Completed
Last Updated: 10 Nov 2022 15:39 by ADMIN
Release 4.0.0
Hannes
Created on: 23 Aug 2022 13:35
Category: UI for .NET MAUI
Type: Bug Report
0
DataGrid: [Android] Entry grows vertically/horizontally when in edit mode in specific case

Hi, I have created a page with a DataGrid on. I have set the datagrid as editable. When I run the app and double click on a cell the cell changes to an entry but the cell keeps on growing. It is also not very responsive then. Only when I tap somewhere else the cell changes back and it returns to its original size.

This only happens on Android.

Here is my XAML


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FertilizerFarm.View.LeafAnalysisEditPage"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:viewmodel="clr-namespace:FertilizerFarm.ViewModel"
             x:DataType="viewmodel:LeafAnalysisEditViewModel"
             xmlns:custom_components="clr-namespace:FertilizerFarm.View.Components"
             Title="Leaf Analysis Detail">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Save"
                 IconImageSource="save_icon.png"
                  Command="{Binding EditCommand}"
                 Order="Primary"
                 Priority="0" />
    </ContentPage.ToolbarItems>
    <StackLayout>
        <VerticalStackLayout>
            <Label Text="Land" Margin="10,12,10,0" FontSize="10" FontAttributes="Bold" TextColor="{StaticResource Primary}"></Label>

            <telerik:RadComboBox IsClearButtonVisible="False" 
                           
                     ItemsSource="{Binding LandList}"
                     DisplayMemberPath="LandNumber"
                     Margin="10,0,10,2"
                     SearchTextPath="LandNumber"
                     SelectedItem="{Binding SelectedLand, Mode=TwoWay}"
                     SelectionMode="Single"
                     IsEditable="True"/>
            <telerik:RadDataGrid x:Name="dataGrid" UserEditMode="Cell"  ItemsSource="{Binding LeafAnalysis.Detail}" AutoGenerateColumns="False" UserFilterMode="Disabled">
                <telerik:RadDataGrid.Columns>
                    <telerik:DataGridTextColumn PropertyName="Chemical" CanUserEdit="False"
                                  HeaderText="Chemical">
                        <telerik:DataGridTextColumn.CellContentStyle>
                            <telerik:DataGridTextCellStyle TextColor="Green" 
                                             FontSize="15" 
                                             SelectedTextColor="Orange"  />
                        </telerik:DataGridTextColumn.CellContentStyle>
                    </telerik:DataGridTextColumn>
                    <telerik:DataGridTextColumn PropertyName="OptimalValue" CanUserEdit="False"
                                  HeaderText="Optimal">

                    </telerik:DataGridTextColumn>
                    <telerik:DataGridTextColumn PropertyName="ChemicalValue" 
                                  HeaderText="Value">

                    </telerik:DataGridTextColumn>
                    <telerik:DataGridTextColumn PropertyName="Measurement"  CanUserEdit="False"
                                  HeaderText="">

                    </telerik:DataGridTextColumn>

                </telerik:RadDataGrid.Columns>
            </telerik:RadDataGrid>
        </VerticalStackLayout>
    </StackLayout>
</ContentPage>

Here is my ViewModel


using FertilizerFarm.Services;

namespace FertilizerFarm.ViewModel;
[QueryProperty(nameof(LeafAnalysis), "LeafAnalysis")]
public partial class LeafAnalysisEditViewModel : BaseViewModel
{
    [ObservableProperty]
    LeafAnalysis leafAnalysis;
    [ObservableProperty]
    bool isRefreshing;
    [ObservableProperty]
    ObservableCollection<Land> landList;
    [ObservableProperty]
    Land selectedLand;

    [ObservableProperty]
    string headerText;
    public bool Initiated { get; protected set; }

    IConnectivity connectivity;
    private readonly LeafAnalysisService leafService;
    private readonly LandService landService;

    public LeafAnalysisEditViewModel(IConnectivity connectivity, LeafAnalysisService leafService, LandService landService)
    {

        this.connectivity=connectivity;
        this.leafService=leafService;
        this.landService=landService;
        Initialize = GetData();



    }
    public Task Initialize { get; }
    private async Task GetData()
    {

        var lands = await landService.GetLandsForUser();

        LandList = new ObservableCollection<Land>(lands);

        if (LandList.Count == 0)
        {
            // show error
        }
        else
        {
            SelectedLand = landList[0];
            LeafAnalysis = await leafService.GetNew(LandList[0].Id);
        }


        Initiated = true;


    }

    [RelayCommand]
    async Task Edit()
    {
        if (IsBusy)
            return;

    }
}

 

If you can't replicate I will scale down our current project to demonstrate the problem.

1 comment
ADMIN
Didi
Posted on: 24 Aug 2022 11:27

Hi Hannes,

I have tested the scenario and reproduced the behavior. The entry expands horizontally/vertically when the DataGrid is placed inside Grid/StackLayout and not all columns are editable. It seems a layout issue. 

In general the control should not be placed inside a StackLayout. If placed inside a stack you have to set a height to the DataGrid. 

 

Workaround set SizeMode= Fixed to the editable column and actual value for Width

<Grid>
    <telerik:RadDataGrid x:Name="dataGrid" UserEditMode="Cell" 
                                AutoGenerateColumns="False"
                                UserFilterMode="Disabled">
        <telerik:RadDataGrid.Columns>
            <telerik:DataGridTextColumn PropertyName="Country" 
                                            CanUserEdit="False" 
                                HeaderText="Chemical">
                <telerik:DataGridTextColumn.CellContentStyle>
                    <telerik:DataGridTextCellStyle TextColor="Green" 
                                            FontSize="15" 
                                            SelectedTextColor="Orange"  />
                </telerik:DataGridTextColumn.CellContentStyle>
            </telerik:DataGridTextColumn>
            <telerik:DataGridTextColumn PropertyName="Capital" 
                                            CanUserEdit="False"
                                HeaderText="Optimal">

            </telerik:DataGridTextColumn>
            <telerik:DataGridTextColumn PropertyName="ChemicalValue" 
                                        SizeMode="Fixed" 
                                        Width="100"
                                HeaderText="Value">

            </telerik:DataGridTextColumn>
            <telerik:DataGridTextColumn PropertyName="Measurement"  
                                            CanUserEdit="False">

            </telerik:DataGridTextColumn>

        </telerik:RadDataGrid.Columns>
    </telerik:RadDataGrid>
</Grid>

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.