0 Replies Latest reply on Aug 6, 2008 7:42 AM by Szczepan Marchewka

    Tree - how to cancel events in javascript

    Szczepan Marchewka Newbie

      I want to make such a tree:
      1. Tree has three level of nodes.
      2. On each level node has one h:commandLink, which open page describing node in another browser window.
      3. Nodes on level 1 and 2 can't be selected (no border outside, no events)
      4. Nodes on level 3 can be selected (border + NodeSelectedEvent)

      How to remove border (selection) in javascript on nodes from level 1 and 2?

      How to cancel in javascript NodeSelectedEvent on the node from level 3, when user clicks on the link to details (in new window)?

      ### File *.jspx looks like: ###

      <rich:tree id="tree" binding="#{DataSubgroup.tree}" value="#{DataSubgroup.model}" switchType="ajax" styleClass="CatGrSubTree" var="item"
      changeExpandListener="#{DataSubgroup.processExpansion}"
      nodeFace="#{item.class.name}"
      reRender="tree,next">

      <rich:treeNode type="bdr.model.Category">
      <h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.category']}">
      <f:param value="#{item.name}"/>
      </h:outputFormat>
      <h:commandLink action="#{DictController.showCategoryInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
      <f:param name="catId" value="#{item.id}"/>
      </h:commandLink>
      </rich:treeNode>
      <rich:treeNode type="bdr.model.Group">
      <h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.group']}">
      <f:param value="#{item.name}"/>
      <f:param value="#{item.mpozn}"/>
      <f:param value="#{item.timesString}"/>
      </h:outputFormat>
      <h:commandLink action="#{DictController.showGroupInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
      <f:param name="grId" value="#{item.id}"/>
      </h:commandLink>
      </rich:treeNode>
      <rich:treeNode type="bdr.model.Subgroup"
      ajaxSubmitSelection="true"
      nodeSelectListener="#{DataSubgroup.selectNode}">
      <h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.subgroup']}" onclick="submit();">
      <f:param value="#{item.name}"/>
      <f:param value="#{item.mpozn}"/>
      <f:param value="#{item.timesString}"/>
      <a4j:support event="click" actionListener="#{DataSubgroup.onSubgroupClick}"/>
      </h:outputFormat>
      <h:commandLink action="#{DictController.showSubgroupInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
      <f:param name="subId" value="#{item.id}"/>
      </h:commandLink>
      </rich:treeNode>
      </rich:tree>



      <h:commandButton id="next" value="Next >>" disabled="#{DataSubgroup.subgroup==null}">
      </h:commandButton>

      When I click on the "Info" link on the levels 1 and 2, it works good and new window is opened. But when I click on the node (not "Info" link) border outside node is displayed.

      When I click on the "Info" link on the node on level 3, it doesn't work, because it sends NodeSelectedEvent to the server. When I click on the node NodeSelectedEvent is raised and it works good.

      How can I improve this with removing in javascript unwanted border from level 1,2 and cancel NodeSelectedEvent when user clicks on the "Info" link on the level 3?

      Please help me.