Hi, I am trying to implement row expander using the jet cook book as given below:
JET Developer Cookbook (0 Bytes)After adding the oj - table as shown in the cook book , i am getting below error:
Error: oj-table with id 'table123': Error while rendering component. Error: Invalid data type.
Please specify the appropriate data type.
Could you please look at the below code and let me know what went wrong? and how to resolve the above reported error? I am uisng JET 7 version.
html code:
<div class="oj-panel oj-bg-info-30">
<div id="tablecontainer">
<oj-table id='table123'
class='oj-table-hide-vertical-scrollbar'
aria-label='Tasks Table'
data='[[rowExpanderTble]]'
layout='fixed'
columns='[
{"headerText": "rowDepartmentId", "sortProperty": "rowDepartmentId", "minWidth": "13rem"},
{"headerText": "DepartmentName","sortProperty": "DepartmentName", "minWidth": "13rem"},
{"headerText": "LocationId","sortProperty": "LocationId", "minWidth": "13rem"},
{"headerText": "ManagerId","sortProperty": "ManagerId", "minWidth": "13rem"}
]'>
<template slot='rowTemplate' data-oj-as='row'>
<tr>
<td>
<oj-row-expander context="[[row]]"></oj-row-expander>
<span>
<oj-bind-text value="[[row.item.data.rowDepartmentId]]"></oj-bind-text>
</span>
</td>
<td>
<span>
<oj-bind-text value="[[row.item.data.DepartmentName]]"></oj-bind-text>
</span>
</td>
<td>
<span>
<oj-bind-text value="[[row.item.data.LocationId]]"></oj-bind-text>
</span>
</td>
<td>
<span>
<oj-bind-text value="[[row.item.data.ManagerId]]"></oj-bind-text>
</span>
</td>
</tr>
</template>
</oj-table>
</div>
</div>
JS Code:
require(["require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojflattenedtreedataproviderview",
"ojs/ojarraytreedataprovider", "ojs/ojkeyset", 'ojs/ojoffcanvas',"ojs/ojbootstrap",'ojs/ojarraydataprovider', 'ojs/ojlistdataproviderview','ojs/ojresponsiveutils','ojs/ojresponsiveknockoututils',
"ojs/ojknockout", "ojs/ojtable", "ojs/ojrowexpander", "ojs/ojbutton", "ojs/ojinputtext",
"ojs/ojlabel", "ojs/ojtoolbar",
'ojs/ojbootstrap','jquery',
"ojs/ojflattenedtreedataproviderview", "ojs/ojarraytreedataprovider","ojs/ojkeyset","ojs/ojrowexpander","ojs/ojtoolbar"],
function (require, exports, ko, ojbootstrap_1, FlattenedTreeDataProviderView, ArrayTreeDataProvider, ojkeyset_1,
OffcanvasUtils,Bootstrap,ArrayDataProvider,ListDataProviderView,responsiveUtils,responsiveKnockoutUtils
)
{
function ChartModel() {
var self = this;
this.value = ko.observable();
this.task1expanded = ko.observable();
this.isAddAll = ko.observable();
this.expanded = new ojkeyset_1.KeySetImpl();
this.rowdeptArray = [
{
rowDepartmentId: 3,
DepartmentName: "ADFPM 1001 neverending",
LocationId: 200,
ManagerId: 300
},
{ rowDepartmentId: 5, DepartmentName: "BB", LocationId: 200, ManagerId: 300 }
]
this.arrayTreeDataProvider = new ArrayTreeDataProvider( this.rowdeptArray,
{keyAttributes: "rowDepartmentId"} );
this.arrayTreeDataProvider = new ArrayTreeDataProvider( self.rowExpanderTble,
{keyAttributes: "rowDepartmentId"} );
this.dataProvider = new FlattenedTreeDataProviderView(this.arrayTreeDataProvider, {
expanded: this.expanded });
this.expandedObservable = this.dataProvider.getExpandedObservable();
this.subscriber = this.expandedObservable.subscribe((value) => {
let expandText = "";
const expanded = value.value;
this.expanded = expanded;
if (expanded.isAddAll()) {
expanded.deletedValues().forEach((key) => {
expandText = expandText.length === 0 ? key : expandText + ", " + key;
});
}
else {
expanded.values().forEach((key) => {
expandText = expandText.length === 0 ? key : expandText + ", " + key;
});
}
this.isAddAll(expanded.isAddAll());
this.value(expandText);
this.task1expanded(expanded.has("t1"));
});
}
$(document).ready(function() {
var chartModel = new ChartModel();
ko.applyBindings(chartModel, document.getElementById('Parent'));
});