<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Chapter 8. The TreeView widget</title> <link rel="stylesheet" href="style.css" type="text/css"> <meta name="generator" content="DocBook XSL Stylesheets V1.73.2"> <link rel="start" href="index.html" title="Programming with gtkmm"> <link rel="up" href="index.html" title="Programming with gtkmm"> <link rel="prev" href="ch07s02.html" title="Multiple-item widgets"> <link rel="next" href="ch08s02.html" title="The View"> </head> <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"> <div class="navheader"> <table width="100%" summary="Navigation header"> <tr><th colspan="3" align="center">Chapter 8. The TreeView widget</th></tr> <tr> <td width="20%" align="left"> <a accesskey="p" href="ch07s02.html"><img src="../icons/prev.png" alt="Prev"></a> </td> <th width="60%" align="center"> </th> <td width="20%" align="right"> <a accesskey="n" href="ch08s02.html"><img src="../icons/next.png" alt="Next"></a> </td> </tr> </table> <hr> </div> <div class="chapter" lang="en"> <div class="titlepage"><div><div><h2 class="title"> <a name="sec-chapter-treeview"></a>Chapter 8. The TreeView widget</h2></div></div></div> <div class="toc"> <p><b>Table of Contents</b></p> <ul> <li><span class="sect1"><a href="ch08.html#id2577990">The Model</a></span></li> <li><span class="sect1"><a href="ch08s02.html">The View</a></span></li> <li><span class="sect1"><a href="ch08s03.html">Iterating over Model Rows</a></span></li> <li><span class="sect1"><a href="ch08s04.html">The Selection</a></span></li> <li><span class="sect1"><a href="ch08s05.html">Sorting</a></span></li> <li><span class="sect1"><a href="ch08s06.html">Drag and Drop</a></span></li> <li><span class="sect1"><a href="ch08s07.html">Popup Context Menu</a></span></li> <li><span class="sect1"><a href="ch08s08.html">Examples</a></span></li> </ul> </div> <p> The <code class="classname">Gtk::TreeView</code> widget can contain lists or trees of data, in columns. </p> <div class="sect1" lang="en"> <div class="titlepage"><div><div><h2 class="title" style="clear: both"> <a name="id2577990"></a>The Model</h2></div></div></div> <p> Each <code class="classname">Gtk::TreeView</code> has an associated <code class="classname">Gtk::TreeModel</code>, which contains the data displayed by the <code class="classname">TreeView</code>. Each <code class="classname">Gtk::TreeModel</code> can be used by more than one <code class="classname">Gtk::TreeView</code>. For instance, this allows the same underlying data to be displayed and edited in 2 different ways at the same time. Or the 2 Views might display different columns from the same Model data, in the same way that 2 SQL queries (or "views") might show different fields from the same database table. </p> <p> Although you can theoretically implement your own Model, you will normally use either the <code class="classname">ListStore</code> or <code class="classname">TreeStore</code> model classes. </p> <p><a class="ulink" href="../../reference/html/classGtk_1_1TreeModel.html" target="_top">Reference</a></p> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578039"></a>ListStore, for rows</h3></div></div></div> <p> The <code class="classname">ListStore</code> contains simple rows of data, and each row has no children. </p> <div class="figure"> <a name="figure-treeview-liststore-model"></a><p class="title"><b>Figure 8.1. TreeView - ListStore</b></p> <div class="figure-contents"><div class="screenshot"><div><img src="../figures/treeview_list.png" alt="TreeView - ListStore"></div></div></div> </div> <br class="figure-break"><p><a class="ulink" href="../../reference/html/classGtk_1_1ListStore.html" target="_top">Reference</a></p> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578082"></a>TreeStore, for a hierarchy</h3></div></div></div> <p> The <code class="classname">TreeStore</code> contains rows of data, and each row may have child rows. </p> <div class="figure"> <a name="figure-treeview-treestore-model"></a><p class="title"><b>Figure 8.2. TreeView - TreeStore</b></p> <div class="figure-contents"><div class="screenshot"><div><img src="../figures/treeview_tree.png" alt="TreeView - TreeStore"></div></div></div> </div> <br class="figure-break"><p><a class="ulink" href="../../reference/html/classGtk_1_1TreeStore.html" target="_top">Reference</a></p> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578125"></a>Model Columns</h3></div></div></div> <p> The <code class="classname">TreeModelColumnRecord</code> class is used to keep track of the columns and their data types. You add <code class="classname">TreeModelColumn</code> instances to the <code class="classname">ColumnRecord</code> and then use those <code class="classname">TreeModelColumns</code> when getting and setting the data in model rows. You will probably find it convenient to derive a new <code class="classname">TreeModelColumnRecord</code> which has your <code class="classname">TreeModelColumn</code> instances as member data. </p> <pre class="programlisting">class ModelColumns : public Gtk::TreeModelColumnRecord { public: ModelColumns() { add(m_col_text); add(m_col_number); } Gtk::TreeModelColumn<Glib::ustring> m_col_text; Gtk::TreeModelColumn<int> m_col_number; }; ModelColumns m_Columns;</pre> <p> You specify the <code class="classname">ColumnRecord</code> when creating the Model, like so: </p> <pre class="programlisting">Glib::RefPtr<Gtk::ListStore> refListStore = Gtk::ListStore::create(m_Columns);</pre> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578183"></a>Adding Rows</h3></div></div></div> <p> Add rows to the model with the <code class="function">append()</code>, <code class="function">prepend()</code>, or <code class="function">insert()</code> methods. </p> <pre class="programlisting">Gtk::TreeModel::iterator iter = m_refListStore->append();</pre> <p>You can dereference the iterator to get the Row: </p> <pre class="programlisting">Gtk::TreeModel::Row row = *iter;</pre> <div class="sect3" lang="en"> <div class="titlepage"><div><div><h4 class="title"> <a name="id2578224"></a>Adding child rows</h4></div></div></div> <p> <code class="classname">Gtk::TreeStore</code> models can have child items. Add them with the <code class="function">append()</code>, <code class="function">prepend()</code>, or <code class="function">insert()</code> methods, like so: </p> <pre class="programlisting">Gtk::TreeModel::iterator iter_child = m_refListStore->append(row.children());</pre> </div> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578261"></a>Setting values</h3></div></div></div> <p> You can use the <code class="function">operator[]</code> override to set the data for a particular column in the row, specifying the <code class="classname">TreeModelColumn</code> used to create the model. </p> <pre class="programlisting">row[m_Columns.m_col_text] = "sometext";</pre> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578286"></a>Getting values</h3></div></div></div> <p> You can use the <code class="function">operator[]</code> override to get the data in a particular column in a row, specifiying the <code class="classname">TreeModelColumn</code> used to create the model. </p> <pre class="programlisting">Glib::ustring strText = row[m_Columns.m_col_text]; int number = row[m_Columns.m_col_number];</pre> <p> The compiler will complain if you use an inappropriate type. For instance, this would generate a compiler error: </p> <pre class="programlisting">//compiler error - no conversion from ustring to int. int number = row[m_Columns.m_col_text];</pre> </div> <div class="sect2" lang="en"> <div class="titlepage"><div><div><h3 class="title"> <a name="id2578324"></a>"Hidden" Columns</h3></div></div></div> <p> You might want to associate extra data with each row. If so, just add it as a Model column, but don't add it to the View. </p> </div> </div> </div> <div class="navfooter"> <hr> <table width="100%" summary="Navigation footer"> <tr> <td width="40%" align="left"> <a accesskey="p" href="ch07s02.html"><img src="../icons/prev.png" alt="Prev"></a> </td> <td width="20%" align="center"> </td> <td width="40%" align="right"> <a accesskey="n" href="ch08s02.html"><img src="../icons/next.png" alt="Next"></a> </td> </tr> <tr> <td width="40%" align="left" valign="top">Multiple-item widgets </td> <td width="20%" align="center"><a accesskey="h" href="index.html"><img src="../icons/home.png" alt="Home"></a></td> <td width="40%" align="right" valign="top"> The View</td> </tr> </table> </div> </body> </html>