CODEWITHSUNDEEP
.netwpfwinformsdatagridviewcontrols
nawfal
nawfal

Reputation: 73183

Control to have editable multiple fields under a single column?

Ok I am asking something that's not conventional. I need to create view where there are users and days of week. I could use datagridview if I need to have only one value per user/per day. But I need to have a wage field as well as an hour field for each user for each day. A screenshot should help better.

enter image description here

I need both the values to be editable. What sort of a control is the way to go here? Can a datagridview cell host two controls? This is the requirement as such; I have not decided yet to go with Winforms or WPF but former is what I am used to (and do not have much time to delve into WPF now, but I am just knowing).

There are a few work arounds like, have one field, say wage in the dgv and display hour in a separate textbox outside the dgv etc. But that is not usable for our client. (I wouldn't mind any hacky/wacky solution/workaround to this)

Upvotes: 0

Views: 199

Answers (1)

Dean Chalk
Dean Chalk

Reputation: 20461

You should have a standard Grid for your header area, then the 'rows' could be an ItemsControl where the ItemsTemplate is a Grid for each row. Then you can align all of the Columns by using SharedSizeScope on your Grids.

here is an example of what I mean

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid x:Name="header">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="col1" />
            <ColumnDefinition Width="Auto" SharedSizeGroup="col2" />
            <ColumnDefinition Width="Auto" SharedSizeGroup="col3" />
        </Grid.ColumnDefinitions>
        <TextBlock FontWeight="Bold" Text="Col1" />
        <TextBlock FontWeight="Bold" Text="Col2" Grid.Row="1" />
        <TextBlock FontWeight="Bold" Text="Col3" Grid.Row="2" />
    </Grid>
    <ItemsControl ItemsSource="{Binding Users}" Grid.Row="1" x:Name="rows">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="col1" />
                        <ColumnDefinition Width="Auto" SharedSizeGroup="col2" />
                        <ColumnDefinition Width="Auto" SharedSizeGroup="col3" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Col1Data}" />
                    <TextBlock Text="{Binding Col2Data}" Grid.Row="1" />
                    <TextBlock Text="{Binding Col3Data}" Grid.Row="2" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

This scenario allows you to create a data grid like UI with an ultimate level of easy customisation.

Upvotes: 1

Related Questions