Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>sap.m.Tree</title>
​
    <script src="shared-config.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-xx-bindingSyntax="complex"
             id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.ui.core, sap.ui.commons">
    </script>
​
    <style>
     .myPurple  {
         background-color: purple !important;
     }
​
     .myYellow {
         background-color: yellow !important;
     }
    </style>
    
    </head>
    <body id="body" class="sapUiBody">
​
    <script>
​
​
     sap.m.StandardTreeItem.extend('MySuperDuperTreeItem', {
         metadata: {
         properties: {
             status: 'string'
         }
         },      
         onAfterRendering: function() {
         if (sap.m.StandardTreeItem.prototype.onAfterRendering) {
             sap.m.StandardTreeItem.prototype.onAfterRendering.apply(this, arguments);
         }
         //var a = getItem(); NOT WORKING
         this.$().find('div').each(function() {
             if ($(this).hasClass('sapMCbBg')) {
             $(this).addClass("myPurple");
             }
         });
         },
         renderer:{}
         
         
     });
​
​
         
​
     var oData = [
         {
         text: "A-Node",
         nodes: [
             {
             text: "A-Node1"
             },
             {
             text: "A-Node2"
             },
             {
             text: "A-Node3"
             }
         ]
         },
         {
         text: "B-Node",
         nodes: [
             {
             text: "B-Node1"
             },
             {
             text: "B-Node2",
             }
         ]
         }
     ];
​
     var oApp = new sap.m.App();
     var oTree = new sap.m.Tree({
         headerText: "Data in Tree Structure"
     });
​
     //JSON
     var oModel = new sap.ui.model.json.JSONModel();
     oTree.setModel(oModel);
     // set the data to the model
     oModel.setData(oData);
​
     var oStandardTreeItem = new MySuperDuperTreeItem({
         title: "{text}"
     });
     oTree.bindItems("/", oStandardTreeItem);
     oTree.expandToLevel(3);
     for (var i = 0; i < oTree.getItems().length; i++) {
         oTree.getItems()[i].setType(sap.m.ListType.Detail);
     }
     oTree.setMode(sap.m.ListMode.MultiSelect);
     var oPage = new sap.m.Page("TreeTest", {
         title : "Test Page for sap.m.Tree",
         content : [oTree]
     });
​
         oTree.addStyleClass("sapUiSizeCompact");
     oApp.addPage(oPage).placeAt("body");
​
     
    </script>
​
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
aljapro
0viewers