Tutorials for using Treelist controls and node queries in devexpress programs

In many cases, we need to display the data through the tree list, such as some hierarchical data, through a hierarchical display, can make users more intuitive view and management of related data. In the case of general WinForm development, you can use the Microsoft TreeView control, or you can use the DevExpress treelist control to display the data. This essay mainly introduces the use of Treelist controls based on DevExpress and the operation of querying nodes using SearchControl.

1, the use of Microsoft's TreeView control implementation of the results and ideas

In many cases, we also tend to use the TreeView control as the display of data, compared to the Treelist control, the control of the processing, it is necessary to manage the hierarchical relationship of the tree node, but the use is relatively simple, rendering the effect of both are not very different.

such as in my development framework, in the dictionary management module, is the use of this control data display, the overall effect is also good.

In the tree list, after we get the data, we build the tree node based on the relationship of the hierarchy, as shown in the following code.

<summary> Initializing Tree information </summary> Privatevoidinittreeview () { This.treeView1.Nodes.Clear (); This.treeView1.BeginUpdate (); list<dicttypenodeinfo> typenodelist = Bllfactory<dicttype>. Instance.gettree (); foreach (Dicttypenodeinfo infointypenodelist) { Addtree (null, info); } This.treeView1.EndUpdate (); This.treeView1.ExpandAll (); } <summary> Based on the node data, recursively constructs the tree node below the level </summary> <param name= "Pnode" > Parent tree Node </param> <param name= "Info" > Dictionary type Data </param> Privatevoidaddtree (TreeNode pnode, dicttypenodeinfo info) { TreeNode node =null; if (info. PID = = "-1") { Node =newtreenode (info. Name, 0, 0); Node. Tag = info.id; THIS.TREEVIEW1.NODES.ADD (node); } Else { Node =newtreenode (info. Name, 1, 1); Node. Tag = info.id; PNODE.NODES.ADD (node); } foreach (Dicttypenodeinfo subinfoininfo.children) { Addtree (node, subinfo); } }

Also, we trigger the AfterSelect event when the mouse selects a node, so that we can handle the events of the mouse node

<summary> ///node event handling ///</summ Ary> Privatevoidtreeview1_afterselect (Objectsender, TreeViewEventArgs e) {   if (e.node.tag!=null)   {     this.lbldicttype.text = E.node.text;     this.lbldicttype.tag = E.node.tag;     binddata ();    }

The above is the use of the TreeView control to handle the display of data, from the above code can be seen, the overall content, mainly through a recursive relationship to build TreeNode processing, but the use of code is not complex, so most of the way to customize the display of tree nodes.

2, the use of DevExpress treelist control effect and implementation code

Using DevExpress's teelist controls, you can specify their hierarchical relationships through keyfieldname and parentfieldname, and use them more simply, providing a data source that automatically processes layers of relationships and is very convenient.

Let's take a look at the interface effects of the dictionary type and the dictionary data shown through the DevExpress treelist control.

How does this result in the code?

First we use code to get the dictionary type data and perform the initialization of the tree list control, as shown below.

Add display Columns THIS.TREE.COLUMNS.ADD (newtreelistcolumn{fieldname= "name", caption= "dictionary type name", width=160, Visibleindex = 0}); Setting hierarchical relationships and properties for tree controls Tree. Keyfieldname = "ID"; Tree. Parentfieldname = "PID"; This.tree.OptionsBehavior.Editable =false; This.tree.OptionsView.EnableAppearanceOddRow =true; This.tree.OptionsView.EnableAppearanceEvenRow =true;

The code above we can also encapsulate the processing of the tree list by extending the function, which has been achieved by simplifying the code, as follows:

Control extension 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 implement the display of the field column, while specifying the Keyfieldname and Parentfieldname in the data source to set the hierarchy relationship is very simple.

The binding data source, however, can be handled by a function, as shown below.

<summary> The data source for the binding tree </summary> Privatevoidbindtree () { This.tree.DataSource = Bllfactory<dicttype>. Instance.getall (); This.tree.ExpandAll (); }

From the above code we can see that we return the data source, do not need at the entity class object hierarchy has a hierarchical relationship, such as through the TreeView implementation, we use the Dicttypenodeinfo object is the upper and lower level relationship.

Here you only need to use a common set of Dicttypeinfo objects, through the Keyfieldname and parentfieldname to set the hierarchical relationship.

In order to specify the icon for the tree node, we can use code to customize the processing of the icon, as shown in the following code, so that each level of the icons are not the same, the automatic implementation of the processing of access settings.

Sets the icon collection and progressive icon for the tree This.tree.SelectImageList =this.imagecollection1; This.tree.CustomDrawNodeImages + = (objectsender, Customdrawnodeimageseventargs e) => { Intmaxcount =this.imagecollection1.images.count; var index = E.node.level < Maxcount? e.node.level:0; E.selectimageindex = index; };

To implement the event handling selected by the tree node, you need to implement the Focusednodechanged event.

Initializing tree node selection events This.tree.FocusedNodeChanged +=delegate (Objectsender, Focusednodechangedeventargs e) { This. Focusednodechanged (); }; } Privatevoidfocusednodechanged () { 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 last code to initialize the tree list is shown below.

privatevoidinittree () {   this.tree.columns.c Lear (); The   //control extension function encapsulates the   this.tree.createcolumn ("name", "Dictionary type name", 160,t Rue);   this.tree.inittree ("ID", "PID", "-1", false,false); The   //sets the icon set of the tree and the progressive icon   this.tree.selectimagelist =this.imagecolle Ction1;   this.tree.customdrawnodeimages = = (Objectsender, Customdrawnodeimageseventargs e) =>   {     intmaxcount =this.imagecollection1.images.coun T     var index = E.node.level < maxcount? e.node.level:0;     e.selectimageindex = index;   }; }

3, based on the SearchControl control of the node query operations

The above processing is the general display of the tree list, if you need to add a query filtering operation on the tree node, then you can use the SearchControl control for filtering, only need to set the SearchControl control of the client property, And the Filternode event that implements the tree control.

<summary> Implement filtering queries for tree nodes </summary> Privatevoidinitsearchcontrol () { This.searchControl1.Client =this.tree; This.tree.FilterNode + = (objectsender, DevExpress.XtraTreeList.FilterNodeEventArgs e) => { if (tree. DataSource ==null) Return Stringnodetext = E.node.getdisplaytext ("Name");//Parameter Fill fieldname if (string. Isnullorwhitespace (Nodetext)) Return Boolisexist = Nodetext.indexof (Searchcontrol1.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 the query that matches the record, then there will be highlighted color for the key annotation.