This lesson is part of the Vision Components and Property Bindings course. You can browse the rest of the lessons below.


Autoplay Off

Supplemental Videos


The Tree View component can display a dataset as a tree hierarchy using the rows as the nodes of the tree.

Video recorded using: Ignition 7.9


(open in window)

[00:00] Let's take a look at the Tree View component. It can be found under the Tables tab of the Component Palette and allows us to organize data into a tree. As soon you drag it onto Window, there's some sample data we can play around with. I can go into Preview mode, and I can expand the folders to see the data. Now we can use the Tree View component for navigation in Ignition. In fact, there's a built-in skeleton project, called Multi-Tier Navigation, that uses it for that purpose. We can also use it to display any data in this form. Now the way we configure the component, is first go to the property called Items, that's the Dataset, and so containing all the items that we display in the tree. So we can right-click on the component and go down to Customizers, Tree View Customizer, to actually configure these items. So I can add one or more rows of data here. Now every row has to have a path and text to display. Look at the first row, the path is East Area/Refrigeration. This path is used to know which folder to put the item inside of. We separate the path by a / which is a separation character by default. And that shows us that it's going to be an East Area, inside Refrigeration there's going to be an item called Compressor1, if you look in the tree view, you see that East Area, Refrigeration, there's Compressor1 and Compressor2. So from there we have have other columns here to customize how I want that particular item to look. So I could add another row at the bottom, I can set the path here to Folder A, I could set the text to Some Item, I can then set an icon if I want to, maybe I'll want to set the icon to a monitor, I can set the background, the foreground, the tooltip, the border, for when it's selected and when it's not selected. So I'm going to make sure the text is the same for the text and SelectedText here, so it's going to be Some Item. So basically I can add one or more rows, we can move 'em up and down, when I press OK, it's going to put that row on the dataset, and I can see it here on the table, on the tree view. So if I expand Folder A, I will see Some Item, with the icon there that I specified. Now the component has a couple of other properties that are important, like the Separation Character, which we're using on that path. So you see it now it's a /, so that's how we know how to break it up into folders. There's a property here called Auto Sort, that automatically sorts the items, the tree, into alphabetical order, if you uncheck that, it'll be sorted by the order of the dataset here. Other property here called Auto Expand, if I set that to true, as soon as we open the window, the folders will all be automatically expanded for us. So, if I go up here and right click and close the window, and I open it again, you'll see all the folders are now expanded in my tree view. Now the dataset here, the Items dataset that has all the items that we're showing, it's a dataset, we can actually bind this to a SQL query, to bring back data from a database and organize that into a tree.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.


Share this video