Download DevExpress v20.2 full version
DevExpress Technical Exchange Group 3: 700924826 Welcome to join the group discussion
DevExpress WPF Subscription (previously named DevExpress WPF Controls) has 120+ controls and libraries, which will help you deliver high-performance business applications that meet or exceed enterprise needs. Through DevExpress WPF, it is possible to create XAML basic applications with powerful interactive functions. These applications focus on the needs of contemporary customers and build a new generation of touch-enabled solutions in the future. Whether it is an extension of Office software or a data-centric business intelligence product, it can be implemented through DevExpress WPF controls.
problem
Trying to embed the tree editor in a grid cell with multi-select function, how to bind the view model SelectedPerils to the checked items in the pop-up tree control?
solution
It is understood that the current goal is to use a pop-up editor with TreeListView to edit collection properties. This article will explain the steps required for this operation.
1. GridControl does not support editing collection properties bound by FieldName, you can change the property declaration so that it uses the object type or uses Binding instead of FieldName. See Binding Columns to Data Source Fields , let's use the first option:
C#
public object SelectedPerils { get; set; }
//...
SelectedPerils = new List<Peril>();
//...
((List<Peril>)Portfolios[0].SelectedPerils).Add(Portfolios[0].Perils[0]);
((List<Peril>)Portfolios[1].SelectedPerils).Add(Portfolios[1].Perils[1]);
((List<Peril>)Portfolios[2].SelectedPerils).Add(Portfolios[2].Perils[0]);
XAML
<dxg:GridColumn FieldName="SelectedPerils" />
2. We recommend using LookUpEdit to display the GridControl in the pop-up window, and using MultiSelectLookUpEditStyleSettings to enable the multi-select function for it, which is a predefined method to perform this operation. Since you want to replace its default TableView with TreeListView, you need to declare CellTemplate and PopupContentTemplate:
XAML
<dxg:GridColumn FieldName="SelectedPerils">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxg:LookUpEdit
DisplayMember="Name"
ItemsSource="{Binding RowData.Row.Perils}"
Name="PART_Editor">
<dxg:LookUpEdit.PopupContentTemplate>
<ControlTemplate>
<dxg:GridControl Name="PART_GridControl" SelectionMode="MultipleRow">
<dxg:GridControl.View>
<dxg:TreeListView KeyFieldName="ID" ParentFieldName="ParentID" />
</dxg:GridControl.View>
</dxg:GridControl>
</ControlTemplate>
</dxg:LookUpEdit.PopupContentTemplate>
<dxg:LookUpEdit.StyleSettings>
<dxg:MultiSelectLookUpEditStyleSettings />
</dxg:LookUpEdit.StyleSettings>
</dxg:LookUpEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
3. Your editor should be able to select nested values, so you need to use a self-referencing data structure , which is why the KeyFieldName and ParentFieldName attributes are used in the template. Otherwise, your LookUpEdit will reject the value other than its ItemsSource because DisplayMember is used there and find mode is turned on.
C#
public class Peril {
public int ID { get; set; }
public int ParentID { get; set; } = -1;
//...
}
//...
Perils = new List<Peril>
{
new Peril { Name = "Earthquake", ID = 0},
new Peril { Name = "EQ", ID = 10, ParentID = 0 },
new Peril { Name = "FF", ID = 11, ParentID = 0 },
new Peril { Name = "Hurricane", ID = 1},
new Peril { Name = "HU", ID = 12, ParentID = 1 },
new Peril { Name = "TC", ID = 13, ParentID = 1 },
new Peril { Name = "Tornado Hail", ID = 2},
new Peril { Name = "TH", ID = 14, ParentID = 2 },
new Peril { Name = "WS", ID = 15, ParentID = 2 },
};
4. The CheckBoxFieldName property is not used , but the SelectionMode is set to MultipleRow, the check box of the TreeListView will not affect its selection. It must be synchronized using a custom implementation (for example, see LookupEdit with TreeView-Get selected items), and the selection of the TreeListView will be automatically posted to the SelectedPerils property.
This is the demo result as shown in the following screenshot:
Go to DevExpress Chinese website to get first-hand latest product information!