I have an <oj-checkboxset> and an <oj-select-single> menu inside an <oj-list-view> component. <oj-list-view> component is placed inside an <oj-dialog>... The list data displays fine, but my oj-select-single value is not getting set. oj-checkboxset value is getting set and the values reflects fine, but oj-select-single doesn't reflect on screen.
--------------my oj-dialog------------------
<oj-dialog style="display:none;" class="ss-coauthor-dialog" id="coauth_dialog" dialog-title="Add coauthors">
<oj-defer>
<div slot="body">
<div slot="assembly"
id="assembly-tab-panel"
role="tabpanel"
aria-labelledby="assembly-tab">
<div class="demo-tab-content">
<h2></h2>
<oj-list-view id="assemblyListview" data="[[assemblyCoAuthors]]" drill-mode="none" selection-mode="none"
selection="{{asmCoAuthSelected}}">
<template slot="itemTemplate">
<div class="oj-flex" style="flex-wrap: nowrap">
<div class="oj-flex-item oj-md-1">
<oj-checkboxset value='[[asmHandleCheckbox($current.data.value)]]'
on-value-changed='[[asmCoAuthListener]]'
class='oj-checkboxset-no-chrome oj-clickthrough-disabled'
:id="[['assemblyListviewSet' + $current.data.value]]"
:data-row-id="{{$current.data.value}}">
<oj-option value="checked" :id="[['assemblyListview' + $current.data.value]]">
</oj-option>
</oj-checkboxset>
</div>
<div class="oj-flex-item">
<div>
<strong>
<oj-bind-text value="[[$current.data.label]]"></oj-bind-text>
</strong>
</div>
</div>
<div class="oj-flex-item oj-md-6">
<oj-select-single data='[[asmAuthorsDataProvider]]'
value='[[asmAuthorTypeHandle($current.data.value)]]'
label-hint='Select Author Type'
label-edge='none'
placeholder='place holder'
on-value-changed='[[asmAuthorTypeListener]]'
disabled='[[asmAuthorTypeDisable($current.data.value)]]'
:id="[['authorSelect' + $current.data.value]]"
:data-row-id="{{$current.data.value}}">
</oj-select-single>
</div>
</div>
</template>
</oj-list-view>
</div>
</div>
</div>
<div slot="footer">
<oj-button id="addCoAuthButton" on-oj-action="[[addCoAuthor]]">ADD</oj-button>
</div>
</oj-defer>
</oj-dialog>
----- My js methods-------
self.asmAuthorType = [
{value: "RC", label: "Regular Coauthor"},
{value: "PC", label: "Principal Coauthor"},
{value: "JA", label: "Joint Author"},
];
self.asmAuthorsDataProvider = new oj.ArrayDataProvider(self.asmAuthorType, {
keyAttributes: "value",
});
PROBLEM AREA:
When values are matching, the below method returns me the correct value, but on oj-select-single it always displays Regular Coauthor even though the values are PC or JA.
self.asmAuthorTypeHandle = function (id) {
// If an entry is found it will return the value
self.asmAuthorTypeSelected().forEach(function (thisAuthorTypeObj) {
if (thisAuthorTypeObj.id === id) {
console.log('thisAuthorTypeObj.id::'+thisAuthorTypeObj.id);
console.log('id::'+id);
console.log('value::'+thisAuthorTypeObj.value);
return thisAuthorTypeObj.value;
}
});
// If no entry found, then return the default value
return "RC";
};
The below checkbox value reflects fine on screen
self.asmHandleCheckbox = function (id) {
return self.asmCoAuthSelected().indexOf(id) === -1 ? [] : ["checked"];
};
Can someone please help me with identifying the issue. I highly appreciate it.
Thanks.