Forum Stats

  • 3,733,828 Users
  • 2,246,828 Discussions
  • 7,856,887 Comments

Discussions

Refresh components in Oracle Jet 8.0

Perevertkin M A
Perevertkin M A Member Posts: 23 Blue Ribbon

I can't refresh treemap from on-value-changed in oj-select-single

Please help.

I have:

  • oj-select-single
  • oj-treemap

I want to refresh a tree component when a value in a selectchanges.

I used .ojTreemap("refresh") but nothing happened

Example:

demo.html

<div id="componentDemoContent" style="width: 1px; min-width: 100%;">
     <div id="treemap-container">
       <oj-select-single id="whSelect"
           data="[[whList]]"
           on-value-changed="[[changeWhHandler]]">
     </oj-select-single>
      <oj-treemap
       id="treemap1"
       animation-on-display="auto"
       animation-on-data-change="auto"
       data="[[treemapData]]">
       <template slot="nodeTemplate">
        <oj-treemap-node
         label="[[$current.data.label]]"
         value="[[$current.data.population]]">
        </oj-treemap-node>
       </template>
      </oj-treemap>
     </div>
    </div>


demo.js


 require(["require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojattributegrouphandler", "text!../cookbook/dataVisualizations/treeView/resources/usaMeanIncomeSubregion.json", "ojs/ojarraytreedataprovider", "ojs/ojarraydataprovider", "ojs/ojknockout", "ojs/ojtreemap", 'ojs/ojknockout',
    'ojs/ojselectsingle'], function (require, exports, ko, ojbootstrap_1, ojattributegrouphandler_1, jsonData, ArrayTreeDataProvider,ArrayDataProvider) {
   "use strict";
    
   class TreemapModel {
     constructor() {
       this.handler = new ojattributegrouphandler_1.ColorAttributeGroupHandler();
       this.data =  [{
            "label": "United States",
              "population": 301461533,
              "meanIncome": 51425
       },{
           "label": "Mexico",
            "population": 301461533,
            "meanIncome": 51425
           }];
       this.treemapData = ko.observableArray();
       this.whs = [{label : "value1", value: "value1"},{label : "value2", value: "value2"}];
       this.changeWhHandler = (event) =>{
         this.data =  [{
                  "label": "United States",
                 "population": 301461533,
                  "meanIncome": 51425
          }];
         this.treemapData = new ArrayTreeDataProvider(this.data, {
         keyAttributes: "label",
         childrenAttribute: "nodes",
       }); 
        $("#treemap1").ojTreemap("refresh");
       };
       
       
       this.whList = new ArrayDataProvider(this.whs, {
          keyAttributes: "value",
        });
       this.treemapData = new ArrayTreeDataProvider(this.data, {
         keyAttributes: "label",
         childrenAttribute: "nodes",
       });

     }
   }
   ojbootstrap_1.whenDocumentReady().then(() => {
     ko.applyBindings(new TreemapModel(), document.getElementById("treemap-container"));

   });
 });

Comments

Sign In or Register to comment.