Hi All,
Jet Version is 5.0
I have a OJ Select One in an editable table where the value is based on a rest service.
When i edit the table (double click on the row) the value gets cleared and select one is showing empty list in screen and when i move the focus to other row previous table value is shown
I use two scripts in Html to display viewable and editable rows
I have attached my html and js and highlighted the select one code
HTML
<div class="overalldiv">
<div class="divtable" style="height: 550px;">
<fieldset>
<legend><b>Responsibilities Definition</b></legend>
<a href="#" id="home" style="color:navy" alt="save" title="Save" data-bind="click: updateUsrResp"> <i class="fa fa-save" aria-hidden="true"></i></a>
<a href="#" id="home" style="color:navy" alt="add" title="Add" data-bind="click: addNewRowusrres"> <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
<div class="divtable">
<div class="oj-flex">
<div class="oj-flex-item">
<div>
<!-- ko if: ready -->
<oj-table id="regdetails" aria-label="User Resp Details Table"
data='[[pagingDatasource]]'
display='grid'
on-oj-before-row-edit-end="[[beforeRowEditEndListener]]"
selection-mode='{"row": "multiple", "column": "multiple"}'
columns-default='{"sortable":"disabled"}'
columns='[
{"headerText": "Responsibility Name", "headerStyle":"text-align:left;",
"field": "responsibility_name",
"style": "text-align:left;width:100px;"},
{"headerText": "Description", "headerStyle":"text-align:left;",
"field": "description",
"style": "text-align:left;width:100px;"},
{"headerText": "Enabled Flag", "headerStyle":"text-align:center;",
"field": "enabled_flag",
"style": "text-align:center;width:50px;"}]'
edit-mode='rowEdit'
row-renderer='[[rowRenderer]]'
style='width: 65%; height:100%;'>
<oj-paging-control id="paging" data='[[pagingDatasource]]' page-size='5' slot='bottom'>
</oj-paging-control>
</oj-table>
<!-- /ko -->
</div>
<script type="text/html" id="row_templateuserres">
<tr>
<td>
<oj-bind-if test='[[$data.responsibility_id]]'>
<div data-bind="text: responsibility_name"></div>
</oj-bind-if>
</td>
<td>
<oj-bind-if test='[[$data.description]]'>
<div data-bind="text: description"></div>
</oj-bind-if>
</td>
<td><input type="checkbox" data-bind="checked: enabled_flag"/></td>
</tr>
</script>
<script type="text/html" id="editRowTemplate">
<tr>
<td>
<oj-select-one options="[[responsibility_name]]" value="{{responsibility_id}}" data-oj-context>
</oj-select-one>
</td>
<td>
<oj-input-text id="it3" value="{{description}}" data-oj-context></oj-input-text>
</td>
<td>
<input type="checkbox" value="{{enabled_flag}}" data-oj-context/>
</td>
</tr>
</script>
</div>
</fieldset>
</div>
</div>
JS
define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojtreeview','ojs/ojknockout','ojs/ojselectcombobox',
'promise','ojs/ojtable', 'ojs/ojpagingcontrol', 'ojs/ojpagingtabledatasource',
'ojs/ojarraytabledatasource','ojs/ojinputnumber','ojs/ojlabel','ojs/ojtimezonedata','ojs/ojdatetimepicker',
'ojs/ojcheckboxset', 'ojs/ojbutton','ojs/ojarraydataprovider', 'ojs/ojpagingcontrol', 'ojs/ojpagingtabledatasource',
'ojs/ojcollectiontabledatasource',
'ojs/ojvalidation-number', 'ojs/ojinputtext','ojs/ojdatagrid',
'ojs/ojcollectiondatagriddatasource', 'ojs/ojvalidation-datetime', 'ojs/ojdatacollection-utils' ],
function (oj, ko, $) {
function securityUserDetailsContentViewModel() {
var self = this;
// User Responsibilities Table Starts Here
self.userResp = ko.observableArray([]);
self.userDataProvider = new oj.ArrayDataProvider(self.userResp, { keyAttributes: 'value'});
$(document).ready(function () {
self.userResponsibility();
});
self.ready=ko.observable(false);
$.getJSON("http://***.***.*.***0:****/****/jetapps/****/SecurityUserRespLov")
.then(users => {
let tempArray = [];
$.each(users.items, (idx, data) => {
tempArray.push({
value: data.responsibility_id,
label: data.responsibility_name
});
});
self.userResp(tempArray);
});
console.log('self user '+self.userResp);
self.datasource = ko.observable();
var res;
self.userResponsibility = function(){
var deptArray=[];
self.datasource(new oj.ArrayTableDataSource(deptArray,{ idAttribute: 'user_responsibility_id'}));
self.pagingDatasource =new oj.PagingTableDataSource(self.datasource());
self.ready(false);
var x;
console.log("Responsibilities table data-----"+userid);
var tarfiffata;
if (userid == null || userid === 'undefined' || userid === 'null')
{
x = "";
} else
{
x = '"user_id":"' + userid + '"';
}
tarfiffata = '{' + x + '}';
var aa = 'http://***.168.1.**0:***/apex/****/admin/SecurityUserRes' + '?q=' + encodeURIComponent(tarfiffata);
console.log("aa data----"+aa);
var loginCollection = new oj.Collection.extend({
url: aa,
model: new oj.Model.extend({
idAttribute: 'user_responsibility_id',
parse: parseRESTDBoptionalcon
}),
});
console.log("change2");
new loginCollection().fetch({
success: function (response) {
console.log(response.toJSON());
res=response.toJSON();
console.log("response---location---"+res);
self.datasource(new oj.ArrayTableDataSource(res,{idAttribute: 'user_responsibility_id'}));
self.pagingDatasource = new oj.PagingTableDataSource(self.datasource());
console.log("ds"+self.datasource);
self.deptArray=res;
console.log("deptarray----location--"+deptArray);
self.ready(true);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('Error in fetch: ' + textStatus);
}
});
};
var responsibility_name = ko.observableArray();
var description = ko.observableArray();
var enabled_flag = ko.observableArray([]);
function parseRESTDBoptionalcon(response) {
console.log("response.len");
if (response['responsibility_name'] == undefined) {
responsibility_name = '';
} else
{
responsibility_name = response['responsibility_name'];
}
if (response['description'] == undefined) {
description = '';
} else
{
description = response['description'];
}
console.log("description" + description);
if (response['enabled_flag'] == undefined) {
enabled_flag = false;
} else
{
enabled_flag = true;
}
}
return {
responsibility_name: responsibility_name,
description: description,
enabled_flag: enabled_flag
};
}
};
self._editRowRenderer = oj.KnockoutTemplateUtils.getRenderer('editRowTemplate', true);
self._navRowRenderer = oj.KnockoutTemplateUtils.getRenderer('row_templateuserres', true);
self.rowRenderer = function (context) {
console.log("true row renderer");
var mode = context['rowContext']['mode'];
//console.log("mode : "+mode);
var renderer;
if (mode === 'edit') {
console.log('check list'+context);
self._editRowRenderer(context);
} else if (mode === 'navigation') {
// console.log('navigation')
self._navRowRenderer(context);
}
};
}
return securityUserDetailsContentViewModel;
});