Release 10.1A: OpenEdge Development:
Progress Dynamics Web Development Guide

> ## TreeView commands and functions

> You can use the JavaScript API to control the following client-side processing:

> - Clearing the current TreeView

> - Identifying TreeView data structure

> - Capturing TreeView events

> ##### Clearing the current TreeView

> You can clear data from the current TreeView with the following statement:

>     dyntree.clear(parent_row_number)

> This command clears data from nodes below the parent node specified by `parent_row_number`. If `parent_row_number` is omitted, the entire TreeView is cleared.

> ##### Identifying TreeView data structure

> Use the following statement to get information about the data structure of the current TreeView:

>     dyntree.element

> The value of `element` can be any of the following:

> JavaScript reference | Returns DOM reference to
>     TABLE.rows[row_
>     number].cells[0]
> | The TD node of the specified row of the HTML table for the TreeView.
>     struct[’node_name’]
> | An associative array of properties defined for the specified node.
>     currentopen
> | The TR element for the currently open node.
>     selected
> | The TR element for the currently selected node.
>     currentwdo
> | The value of `hdata` for the currently open source data object.

> ##### Capturing TreeView events

> You can create a function, `tvEvent`, in your client-side JavaScript to capture TreeView events. Use the following syntax:

>     tvEvent(event)

> For `event`, you must use one of the following:

> Event | TreeView state
>     launch
> | Waiting for server to return container.
>     fetch
> | Waiting for server to return child nodes.
>     extract
> | Extract program node is selected.
>     empty
> | Node with no container is selected.
>     view
> | Data node is selected.
>     update
> | Data node is in update mode.
>     add
> | Data is being added.
>     modify
> | Data is being edited.

> ##### Example

> The following example illustrates the use of some of the TreeView API calls:

>     // department.js - Filter viewer for Department treeview
>     function filterButton(){
>       dyntree.clear(1); // Clear the nodes underneath the department node (0)
>       // Setting the filter criteria
>       document.form['_departmefullo._filter'].value=
>           'deptname > '+apph.logic.widgetValue('fifrom').split(',')[0]
>        +'| deptname < '+apph.logic.widgetValue('fito').split(',')[0];
>       apph.actions([
>         'server.departmefullo.filter',      // filter command
>         'server.wbo.0.department.dyntree',  // treeview data fetch command
>         'wbo.submit']);                     // submit the request
>     }
>     // Capture treeview events
>     function tvEvent(status){
>       window.main.status='tvEvent='+status;
>       viewerMode(status!='modify' && status!='add');
>     }
>     // Custom function to set state of viewer input fields
>     var vmode=true;
>     function viewerMode(mode){
>       if(vmode==mode) return;
>       vmode=mode;
>       var inputs=document.forms['_departmentfilterv'];
>       for(var i=0;i<inputs.length;i++){
>         if(vmode){
>           inputs[i].removeAttribute('disabled');
>         } else {
>           inputs[i].setAttribute('disabled','disabled');
>         }
>       }
>     }

Copyright © 2005 Progress Software Corporation www.progress.com Voice: (781) 280-4000 Fax: (781) 280-4095