TREE-VIEW


Content Tipo Tree View.

En la visualización de los contents podemos lograr que se muestre en forma de árbol, para esto, debemos definir en la declaración del Content el atributo viewmode=“treeview”. Pero solo no basta con esto, tenemos que además en la colección del Content, definir un Content “HIJO” que contendrá los elementos asociados al registro “PADRE”. Este Content HIJO tendrá un campo ID que se corresponde con el content “PADRE”.



La definición se hace de la siguiente forma:

1.Declaramos el Content tipo “TREEVIEW” declarando en el prop el atributo viewmode=“treeview” 

    <frame name="c5" width="98%" height="1040p" framebox="true" border-corner-radius="10" lmargin="1%" >
          <prop name="CABECERA_LBL5" type="TL" class="classtl" title="Content en Arbol" />
          <prop name="ContentPadre" visible="1" type="Z" viewmode="expanview" contents="ContentPadre" height="90%"></prop>
          <contents name="ContentPadre" src="ContentPadre" autofocus="true" filter="IDPADRE IS NULL"></contents>
    </frame>


2. En la colección Content Padre tendremos ahora que declarar un Content Hijo que contendrá los “registros hijos” asociados al “registro padre” a través del IDPadre e IDHijo . 

<coll name="ContentPadre" title="mapaDatos" edit-inrow="false" loadall="true"
cell-odd-colorx="#FFFFFF" cell-even-colorx="#F2F2F2" 
sql="select t1.*,t1.ICON as MAP_ICON,
'[' || (select count(ID) from gen_mapa_datos where IDPADRE = t1.ID) || ']' as MAP_COUNT
from ##PREF##mapa_datos t1" objname="mapa_datos"
updateobj="mapa_datos" progid="ASData.CASBasicDataObj">    
 
      <group name="General" id="1">
          <frame name="frmG" width="100%" bgcolor="#ffffff">
                <prop name="MAP_ICON" type="IMG" lmargin="20p" tmargin="20p" width="80p" height="80p" visible="4"  bmargin="20p" />
                <prop name="NOMBRE" type="T" textfont-bold="true" class="classgrid" align="left|center" width="490p" height="80p" newline="false" tmargin="20p" bmargin="20p" />
                <prop name="MAP_COUNT" type="T" text-forecolor="#666666" textfont-size="5" class="classgrid" align="left|center" width="110p" height="80p" newline="false" tmargin="20p" bmargin="20p" />
          </frame>
 
        <prop name="ContentHijo" title="ContentHijo" type="Z" visible="1" contents="ContentHijo" />
        <contents name="ContentHijo" src="ContentHijo" filter="IDPADRE=##FLD_ID##" />
 
      </group>
 
      <onexpand refresh="false">
        <action name="runscript">
          <script language="javascript">
				ui.refreshContentRow("ContentPadre", self.getOwnerCollection().getObjectIndex(self));
			</script>
        </action>
      </onexpand>
 
      <oncollapse refresh="false">
        <action name="runscript">
          <script language="javascript">
				ui.refreshContentRow("ContentPadre", self.getOwnerCollection().getObjectIndex(self));
			</script>
        </action>
      </oncollapse>
 
</coll>
Nótese la declaración de los nodos oncollapse y onexpand en el Content Padre, estos nodos son los que permiten dar la funcionalidad al Content de abrir y cerrar el árbol de padre e hijos



3. Definir la Colección Content Hijo donde se asocia el registro al padre correspondiente por ID. 

<coll name="ContentHijo" title="mapaDatos" loadall="true" 
sql="select t1.* from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj">
      <group name="General" id="1">  
          <frame name="frmG" width="640p" lmargin="80p" bgcolor="#ffffff" >
                <prop name="NOMBRE" textfont-bold="true" text-forecolor="#666666" type="T" class="classgrid" lmargin="20p" tmargin="20p" rmargin="20p" />
                <prop name="DIRECCION" height="90p" class="classgrid" type="T" lmargin="30p" bmargin="20p" text-forecolor="#666666" textfont-size="5" lines="2" fixed-lines="true" />
                <prop name="IDPADRE" type="N" visible="0" mapcol="ContentPadre" mapfld="ID" />
          </frame>
      </group>
      <load>
        <action name="runscript">
          <script language="javascript">
		 	self.MAP_ICON = "add.png";
	 </script>
        </action>
      </load>
      <selecteditem>
        <action name="runscript">
          <script language="javascript">
	  </script>
        </action>
      </selecteditem>
    </coll>