Skip to Content
avatar image
Former Member

extend TreeNode in SAPUI5

Hi together,

today I've tried to extend a TreeNode. I'v found in the SCN how to extend a TextField and that works fine.

sap.ui.commons.TextField.extend( "PcTreeNode", {    metadata : {        properties : {            "imcpid" : "string"        }    },    renderer : {        renderInnerAttributes : function( oRm, oTreeNode )        {            oRm.writeAttributeEscaped( 'imc-pid', oTreeNode.getImcPid() );        }    }} );

But if I try exactly the same with an TreeNode:

sap.ui.commons.TreeNode.extend( "PcTreeNode", {    metadata : {        properties : {            "imcpid" : "string"        }    },    renderer : {        renderInnerAttributes : function( oRm, oTreeNode )        {            oRm.writeAttributeEscaped( 'imc-pid', oTreeNode.getImcPid() );        }    }} );

I get the following error:

Error: failed to load 'sap.ui.commons.TreeNodeRenderer' from resources/sap/ui/commons/TreeNodeRenderer.js: 404 - Not Found

Any suggestions?

Thanks in advance.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Apr 05, 2013 at 03:03 PM

    Hi Chris,

    UI5 differs between Controls and Elements. A Control is an UI object which renders itself where an Element is rendered by it's aggregating control. Therefore it is not possible to extend an Element and add a renderer to the Element. This will not work.

    For now I would live with the following workaround, that after the rendering you use jQuery to find your TreeNodes and set the custom attributes. Therfore you have to overwrite the Tree and the TreeNode:

      sap.ui.commons.Tree.extend("my.Tree", {      onAfterRendering: function(oEvent) {    sap.ui.commons.Tree.prototype.onAfterRendering.apply(this, arguments);    var fnUpdateNodes = function(aNodes) {     jQuery.each(aNodes, function(iIndex, oNode) {      if (oNode.getImcpid && oNode.getImcpid()) {             jQuery.sap.byId(oNode.getId()).attr("imcpid", oNode.getImcpid());      }     });    }    fnUpdateNodes(this.getNodes());   },      renderer: {}     });    sap.ui.commons.TreeNode.extend("my.TreeNode", {      metadata: {    properties: {     "imcpid": "string"    }   }     });

    BTW: the function renderInnerAttributes is a specific hook of the TextFieldRenderer which is used to add custom attributes in controls which extend the TextField, like the DropDown, ComboBox, ... The Tree has not such a hook yet.

    Best regards and happy weekend,

    Peter

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Peter,

      thanks for the reply. I also had the idea of using plain jQuery to solve the problem. But the problem is, that I use the Tree in an overlayContainer wich seems to be rendered twice. If I log my nodes, I can see, that they rendered first correct with my new attribute. But then they logged again without it.

      That seems to be a problem of the overlayContainer wich renders the content twice, even if I created them in a view.

      And for the second time there is no afterRendering event. I have implemented the addition of the attribute in the open (overlayContainer) eventHandler.