I am trying to display an array of data in the form of list view using ojListView component. the array has four columns which are displayed using a script like below: The fourth column is a description about the object in the array. I need to render an information icon as the fourth column value and display the description in a popup on click of the information icon.
View Code:
<div >
<ul id="datalistview"
data-bind="ojComponent: {component: 'ojListView',
data: dataProvider,
item: {template: 'server_template'},
selectionMode: 'single',
selection:selectedRow}">
</ul>
<script type="text/html" id="server_template">
<li data-bind="attr: {id: $data['name']}">
<div class="oj-flex ">
<div class="oj-sm-2 oj-md-2 oj-lg-2 oj-xl-2 oj-flex-item ">
<!-- code to display the first column -->
</div>
<div class="oj-sm-5 oj-md-5 oj-lg-5 oj-xl-5 oj-flex-item " >
<!-- code to display the first column -->
</div>
<div class="oj-sm-4 oj-md-3 oj-lg-3 oj-xl-4 oj-flex-item ">
<!-- code to display the first column -->
</div>
<div class="oj-sm-1 oj-md-2 oj-lg-2 oj-xl-1 oj-flex-item ">
<!-- <a id="infoIcon" data-bind="">
<img src="../images/func_info_16_act.png" />
</a>-->
<button id="infoIcon"
data-bind=" click:$root.openDescriptionPopup,
ojComponent: {
component:'ojButton',
label:'info',
icons:{start:'oj-component-icon'}
}">
</button>
</div>
</div>
<div style="display:none; " id="descriptionPopup"
data-bind="ojComponent:{component: 'ojPopup',
tail: 'simple', modality:'modeless'
}">
<span class="data"><span data-bind="text: description"></span></span>
</div>
</li>
</script>
</div>
View Model Code:
var self = this;
var data = [{name: 'row1', nickName:'r1', age:18, description: 'Description about row1'},
{name: 'row2', nickName:'r1', age:20, description: 'Description about row2'},
{name: 'row3', nickName:'r1', age:25, description: "Description about row3"}
];
self.dataProvider = new oj.ArrayTableDataSource(data, {idAttribute: "name"});
self.openDescriptionPopup = function (event,ui) {
$("#descriptionPopup").ojPopup('open');
};
So for the above data, the fourth column will be rendered with an information icon for all rows, when information icon in row 1 is clicked, popup should be opened pointing to the icon with the text 'Description about row1' displayed, similarly for the other rows. The requirement is to have a non-modal popup, (a tooltip kind), so there is no code written for closing this popup. It should be dismissed when any other element on the page is clicked.
When i run this code, on click on the information icon, i get the popup displayed but i am seeing the below issues:
1. The data displayed in the popup does not correspond to the description of the row clicked. I am randomly seeing the description of any of the rows on click of any of them.
2. After the popup is displayed, if any other element on the page is clicked, I am seeing the error below in the console:
ojcore.js:262 Error closing popup:
Error: cannot call methods on surrogate prior to initialization; attempted to call method 'option'
3.So the popup doesnt get closed and as i click on the information icon of other rows, new popups keep getting displayed, overlapping one another.
A non-modal popup should get closed without any need for additional code to be written for it right? I am not sure why there is an error on closing the popup and why the column data corresponding to the selected row is not getting displayed properly. Any inputs will be helpful. Thanks in advance.