Detailed description of how to use the TreeList control and node Query Processing in the DevExpress program, devexpresstreelist

Detailed description of how to use the TreeList control and node Query Processing in the DevExpress program, devexpresstreelist

In many cases, we need to display data through a tree list, such as hierarchical data, allows users to view and manage relevant data more intuitively. In general Winform development, you can use the Microsoft TreeView control or the DevExpress TreeList control to display data, this article describes how to use the DevExpress-based TreeList control and how to use SearchControl to query nodes.

1. Effects and ideas of using Microsoft's TreeView Control

In many cases, we also tend to use the TreeView control as the data display. Compared with the TreeList control, to process the control, we need to manage the hierarchy of Tree nodes by ourselves, but it is also relatively simple to use, the effects are not very different between the two.

For example, in my development framework, in the dictionary management module, this control is used to display data, and the overall effect is also good.

In the tree list, after we obtain the data, we can build a tree node based on the hierarchical relationship, as shown in the following code.

/// <Summary> /// initialization tree information /// </summary> private void InitTreeView () {this. treeView1.Nodes. clear (); this. treeView1.BeginUpdate (); List <DictTypeNodeInfo> typeNodeList = BLLFactory <DictType>. instance. getTree (); foreach (DictTypeNodeInfo info in typeNodeList) {AddTree (null, info);} this. treeView1.EndUpdate (); this. treeView1.ExpandAll () ;}/// <summary> /// Based on the node data, recursively construct the Tree nodes below this level /// </summary> /// <param name = "pNode"> parent tree node </param> /// <param name = "info"> dictionary type data </param> private void AddTree (TreeNode pNode, dictTypeNodeInfo info) {TreeNode node = null; if (info. PID = "-1") {node = new TreeNode (info. name, 0, 0); node. tag = info. ID; this. treeView1.Nodes. add (node);} else {node = new TreeNode (info. name, 1, 1); node. tag = info. ID; pNode. nodes. add (node);} foreach (DictTypeNodeInfo subInfo in info. children) {AddTree (node, subInfo );}}

In addition, when we select a node with the mouse, the AfterSelect event is triggered, so that we can handle the event of the mouse node.

/// <Summary> /// click Node event processing /// </summary> private void treeviewappsafterselect (object sender, TreeViewEventArgs e) {if (e. Node. Tag! = Null) {this. lblDictType. Text = e. Node. Text; this. lblDictType. Tag = e. Node. Tag; BindData ();}}

The above section uses the TreeView control to process data presentation. From the code above, we can see that the overall content mainly uses recursive relationships to construct TreeNode processing, however, the code used is not complex, so most of them can use this method to customize the display of Tree nodes.

2. Effects and implementation code of the TreeList control of DevExpress

Using the TeeList control of DevExpress, you can use KeyFieldName and ParentFieldName to specify their hierarchical relationships, which makes it easier to use. The provided data source automatically processes hierarchical relationships, making it very convenient.

Let's first take a look at the dictionary type and the interface effect of dictionary data displayed through the TreeList control of DevExpress.

How is the effect achieved through code?

First, we use the code to obtain dictionary-type data and initialize the tree list control, as shown below.

// Add the display column this. tree. columns. add (new TreeListColumn {FieldName = "Name", Caption = "dictionary type Name", Width = 160, VisibleIndex = 0 }); // set the hierarchy and attribute tree of the tree control. keyFieldName = "ID"; tree. parentFieldName = "PID"; this. tree. optionsBehavior. editable = false; this. tree. optionsView. enableAppearanceOddRow = true; this. tree. optionsView. enableAppearanceEvenRow = true;

The above code can also be encapsulated by extended functions to simplify the code. The following is the implementation code after processing:

// Controls extended function encapsulation processing this. tree. createColumn ("Name", "dictionary type Name", 160, true); this. tree. initTree ("ID", "PID", "-1", false, false );

By adding a TreeListColumn object to the TreeList control, you can display the field columns and specify the KeyFieldName and ParentFieldName in the data source to set the hierarchical relationship. This is very simple.

You can use a function to bind a data source, as shown below.

/// <Summary> /// data source bound to the tree /// </summary> private void BindTree () {this. tree. dataSource = BLLFactory <DictType>. instance. getAll (); this. tree. expandAll ();}

From the code above, we can see that the returned data source does not need to have a parent-child relationship at the object class object level, such as when implemented through TreeView, we use the DictTypeNodeInfo object to have a hierarchical relationship between the upper and lower levels.

You only need to use the common DictTypeInfo object set to set the hierarchical relationship through KeyFieldName and ParentFieldName.

To specify the icon of a tree node, we can use the code to process custom icons, as shown in the following code. In this way, the icons at each level are different and the settings are automatically obtained.

// Set the tree icon set and step-by-step icon this. tree. selectImageList = this. imageCollection1; this. tree. customDrawNodeImages + = (object sender, CustomDrawNodeImagesEventArgs e) => {int maxCount = this. imageCollection1.Images. count; var index = e. node. level <maxCount? E. Node. Level: 0; e. SelectImageIndex = index ;};

To process the Events Selected by the tree node, you must implement the FocusedNodeChanged event.

// Initialization Tree node selection event this. tree. focusedNodeChanged + = delegate (object sender, FocusedNodeChangedEventArgs e) {this. focusedNodeChanged () ;};} private void FocusedNodeChanged () {if (this. tree. focusedNode! = Null) {var PID = string. concat (this. tree. focusedNode. getValue ("ID"); treeConditionSql = string. format ("DictType_ID = '{0}'", PID);} else {treeConditionSql = "" ;}binddata ();}

The code for the initialization tree list is as follows.

Private void InitTree () {this. tree. columns. clear (); // controls extended function encapsulation processing this. tree. createColumn ("Name", "dictionary type Name", 160, true); this. tree. initTree ("ID", "PID", "-1", false, false); // set the tree icon set and step-by-step icon this. tree. selectImageList = this. imageCollection1; this. tree. customDrawNodeImages + = (object sender, CustomDrawNodeImagesEventArgs e) => {int maxCount = this. imageCollection1.Images. count; var index = e. node. level <MaxCount? E. Node. Level: 0; e. SelectImageIndex = index ;};}

3. query Nodes Based on the SearchControl Control

The above processing is a general display of the tree list. If you need to add a query and filter operation on the tree node, you can use the SearchControl control to filter, you only need to set the Client attribute of the SearchControl and implement the FilterNode event of the tree control.

/// <Summary> /// filter and query Tree nodes /// </summary> private void InitSearchControl () {this. searchControl1.Client = this. tree; this. tree. filterNode + = (object sender, DevExpress. xtraTreeList. filterNodeEventArgs e) =>{ if (tree. dataSource = null) return; string nodeText = e. node. getDisplayText ("Name"); // enter FieldName if (string. isNullOrWhiteSpace (nodeText) return; bool isExist = nodeText. indexOf (searchContro L1.Text, StringComparison. OrdinalIgnoreCase)> = 0; if (isExist) {var node = e. Node. ParentNode; while (node! = Null) {if (! Node. Visible) {node. Visible = true; node = node. ParentNode;} else break;} e. Node. Visible = isExist; e. Handled = true ;};}

The implementation effect is as follows. For queries that match the record, highlighted colors are highlighted.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!