Online JSON Viewer. API: treeview TreeView.js (YUI Library) Yahoo User Interface library (YUI) Books YUI 2.8: Learning the Library My first published book.
Something I didn't expect. The guys at Packt Books sent me an email around December 2009 asking if I cared to do an update to their existing book on YUI. The original author was busy at the time and could not do it. It gave me a big oportunity to really learn the whole library, not just the components I am most used to. Anyway, it is finally out there: YUI 2.8: Learning the Library Examples Server driven DataTable with pagination and sorting.
This example builds a DataTable based on the columns information taken from the server. It has been based on the server-side pagination and server-side sorting examples. The source files for this sample are available for download in a zip file. Data Grid The DataTable is basically meant to represent data structured as in a regular database table. All columns have a custom formatter and editor function. TreeView Example: Dynamic Load, Using node.onLabelClick and node.data. Date: September 25, 2006 Component: TreeView, Event Version: v0.11.3 Click on a node label above to report the node's label and custom data here.
This simple example of a TreeView using dyanmic loading responds to jmpow99's question on the YDN-JavaScript group (and followup question here). The followup question asks about how to determine what node is involved when a label is clicked on and how to track information about that node. Now, how to get to that data when a label is clicked? Note that in our onLabelClick function we're extracting just the label member from our Node's data object, but any additional data that we stored there would be accessible to us at that point — including, for example, the unique identifier that might tie that node to its corresponding database record. In total, our code now looks like this: — Eric Miraglia, Yahoo Presentation Platform Engineering. YUI TreeView Example. YUI TreeView is a Javascript tree widget, which is part of the Yahoo!
YUI platform (YAHOO.widget.TreeView). PHOCOA has a wrapper widget class (WFYAHOO_widget_TreeView) that makes it very easy to build either a static Javascript tree view or dynamic AJAX tree view (dynamic data loading). Static Javascript TreeView All data in this example is available for initial page output and the data is included in Javascript as the page is built. This is the ideal way to create fast-loading treeview widgets when the amount of data is small and can be built quickly. Dynamic AJAX TreeView In the dynamic example, only the "top level" of items is loaded with the initial page data. This is the ideal way to build a tree view interface when the tree represents a large amount of data or the time to build all data is longer than desired.
PHOCOA Wrapper for YAHOO.widget.TreeView With PHOCOA, you don't need to write any Javascript to use the Yahoo TreeView. YUI Library Examples: Menu Family: Website Top Nav With Submenus From JavaScript.
API: treeview YAHOO.widget.TreeView (YUI Library) YUI 2: Connection Manager. How to print debug messages in the Google Chrome Javascript Console. Connection Manager POST Transaction. YUI Library Examples: Connection Manager: Connection Manager POST Transaction. YUI Library Examples: TreeView Control: Treeview Node Selection and Checkbox Example. Tri-State Checkbox Example Nodes of the TreeView Control can be highlighted in response to a user action or via code.
That highlighting can affect a single node at a time or multiple nodes and it can propagate up or down the tree. In this example we show two trees built at random with different node highlighting settings. We begin by defining the containers that will hold the trees. The built-in stylesheet allows for two styles of highlighting, the first one, selected via the className ygtv-checkbox, will add a tri-state checkbox in between the toggle icon and the label, the second, selected via the className ygtv-highlight, will change the background of highlighted nodes.
<h3>Tree with highlight propagation and 'checkbox' skin</h3><div id="treeDiv1" class="ygtv-checkbox"></div><button id="logHilit">Log selected</button><hr/><h3>Tree with single node highlighting and simple skin</h3><div id="treeDiv2" class="ygtv-highlight"></div> YUI Library Examples: TreeView Control.