Skip to Main Content

Refresh components in Oracle Jet 8.0

Perevertkin M AJun 3 2021

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
Post Details
Added on Jun 3 2021
3 comments
44 views