WPF datagrid with checkListBox drop down

Question

I am fairly new to WPF development . I would like to create a WPF datagrid with the following columns : CheckBox column ,Text column , button column , checklist box drop down column and combobox drop down column. I also need to add listeners to the checklist box drop down columns . I have created the same in winforms using Infragistics Ultragrid . It looks like this :

I read up on adding some custom control to datagrid in wpf using DataGridTemplateColumn but am not sure how to implement this. Can Template take in Combobox and Checklistbox ? A short code example would be great. Will I have to use infragistics or can this UI be realised using WPF standard controls?

Any help on this would be appreciated.

CrumblyRock CrumblyRock · Accepted Answer · 2015-05-18T16:06:20

You can accomplish this with standard WPF controls. That's one of the greatest parts about WPF - it is extremely flexible (usually without too much effort). Here is an example that should get you pointed in the right direction:

<DataGrid AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridCheckBoxColumn Header="Selected"/>
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="Click Me!" 
                                        Command="{Binding myItemCommand}"/>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Header="Task" 
                                        Binding="{Binding TaskText}"/>
                    <DataGridTextColumn Header="Resources" 
                                        Binding="{Binding ResourcesText}"/>
                    <DataGridComboBoxColumn ItemsSource="{Binding AvailableStatuses}" 
                                            SelectedItemBinding="{Binding SelectedStatus}" 
                                            Header="Status" />
                </DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <DataGrid ItemsSource="{Binding Resources}">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Binding="{Binding IsResourceUsed}"/>
                <DataGridTextColumn Binding="{Binding ResourceName}"/>
            </DataGrid.Columns>
        </DataGrid>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

Once you get inside of the tag as shown above, you can put pretty much whatever controls inside of it that you want and they will be repeated for each row. The binding for each item is tied to whatever object the row represents, so if you have a list of task objects that your DataGrid is displaying, each task in that list should have properties to bind to for the TaskText, ResourcesText, etc.

EDIT: Updated the code snippet to show a RowDetailsTemplate. If a RowDetailsTemplate with something like another DataGrid inside of it doesn't get the job done, you could always write your own multi-select combobox, but it might be fairly involved, as the default one has no good way that I know of to allow you to select multiple items.

WPF datagrid with checkListBox drop down

1 Answers