Search code examples
mauirowdetails

Is it possible to use the Row detail in .net maui?

I'm looking for a way to display row details in a DataGrid.

I am new to app development and would like to display some data in the row and show some related details in the row details. Is there any way to implement this in .NET MAUI?

The image shows how it should roughly look like:

enter image description here

Solution

  • You can approximate this with a CollectionView IsVisible setting to hide/show the detail:

    // CompanyInfo.cs
public partial class CompanyInfo : ObservableObject
{
    [ObservableProperty]
    private string? _companyName;
    [ObservableProperty]
    private string? _contactFirstName;
    [ObservableProperty]
    private string? _contactLastName;
    [ObservableProperty]
    private string? _email;
    [ObservableProperty]
    private string? _phone;
    [ObservableProperty]
    private string? _salesPerson;
    [ObservableProperty]
    private bool? _isSelected = false;
}

    <!-- MainPage.xaml -->
<ContentPage>
    <CollectionView ItemsSource="{Binding Companies}" SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:CompanyInfo">
                <VerticalStackLayout Spacing="20">
                    <Grid ColumnDefinitions="*,*,*">
                        <Label Text="{Binding CompanyName}"/>
                        <Label Grid.Column="1" Text="{Binding ContactFirstName}"/>
                        <Label Grid.Column="2" Text="{Binding ContactLastName}"/>
                    </Grid>
                    <VerticalStackLayout Spacing="10" IsVisible="{Binding IsSelected}">
                        <Label Text="{Binding Email, StringFormat='Email: {0}'}"/>
                        <Label Text="{Binding Phone, StringFormat='Phone: {0}'}"/>
                        <Label Text="{Binding SalesPerson, StringFormat='Sales Person: {0}'}"/>
                    </VerticalStackLayout>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

    // MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    public ObservableCollection<CompanyInfo> Companies { get; } = new ObservableCollection<CompanyInfo>(
        new CompanyInfo[]
        {
            new CompanyInfo { CompanyName = "A Bike Store", ContactFirstName = "Orlando", ContactLastName = "Gee", Email = "e1@bike", Phone = "555-0100", SalesPerson = "Keith Harris" },
            new CompanyInfo { CompanyName = "A Great Bicycle Company", ContactFirstName = "Jodan", ContactLastName = "Jacobson", Email = "e2@bike", Phone = "555-0101", SalesPerson = "Keith Harris" },
            new CompanyInfo { CompanyName = "Acceptable Sales & Service", ContactFirstName = "Elisabeth", ContactLastName = "Keyser", Email = "[email protected]", Phone = "656-555-0173", SalesPerson = @"adventure-works\jose1", IsSelected=true },
        }
    );

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}