Hi,
I am new to JET, i would like to know how I can display flag url image to JET table column. I tried the attached html and js code.
But it is not working.
Please help
efine(['ojs/ojcore', 'knockout', 'jquery','ojs/ojknockouttemplateutils', 'ojs/ojtable', 'ojs/ojarraytabledatasource'],
function (oj, ko, $, KnockoutTemplateUtils) {
function AboutViewModel() {
var self = this;
self.data = ko.observableArray();
$.getJSON("https://restcountries.eu/rest/v2/all").
then(function (countries) {
var tempArray = [];
$.each(countries, function () {
tempArray.push({
name: this.name,
alpha2Code: this.alpha2Code,
callingCodes: this.callingCodes,
population: this.population,
capital: this.capital,
region: this.region,
subregion: this.subregion,
flag: this.flag
});
});
self.data(tempArray);
});
self.datasource = new oj.ArrayTableDataSource(
self.data,
{keyAttributes: 'name'}
);
this.columnArray = [
{"headerText": "Name", "field": "name"},
{"headerText": "Code", "field": "alpha2Code"},
{"headerText": "ISD", "field": "callingCodes"},
{"headerText": "Population", "field": "population"},
{"headerText": "Capital", "field": "capital"},
{"headerText": "Region", "field": "region"},
{"headerText": "Sub Region", "field": "subregion"},
{"headerText": "Flag",
"sortable": "disabled",
"renderer": KnockoutTemplateUtils.getRenderer("emp_photo",true)}
];
// Below are a set of the ViewModel methods invoked by the oj-module component.
// Please reference the oj-module jsDoc for additional information.
/**
* Optional ViewModel method invoked after the View is inserted into the
* document DOM. The application can put logic that requires the DOM being
* attached here.
* This method might be called multiple times - after the View is created
* and inserted into the DOM and after the View is reconnected
* after being disconnected.
*/
self.connected = function () {
// Implement if needed
};
/**
* Optional ViewModel method invoked after the View is disconnected from the DOM.
*/
self.disconnected = function () {
// Implement if needed
};
/**
* Optional ViewModel method invoked after transition to the new View is complete.
* That includes any possible animation between the old and the new View.
*/
self.transitionCompleted = function () {
// Implement if needed
};
}
/*
* Returns a constructor for the ViewModel so that the ViewModel is constructed
* each time the view is displayed. Return an instance of the ViewModel if
* only one instance of the ViewModel is needed.
*/
return new AboutViewModel();
}
);
About Content A
<oj-table id='table' aria-label='Departments Table'
data='[[datasource]]'
columns-default.sortable='disabled',
selection-mode='{"row": "multiple", "column": "multiple"}',
dnd='{"reorder": {"columns": "enabled"}}'
scroll-policy='loadMoreOnScroll'
scroll-policy-options='{"fetchSize": 10}',
columns='{{columnArray}}',
style='width: 100%; height: 500px;'>
</oj-table>
<script type="text/html" id="emp_photo">
<td>
<span class="avatar" data-bind="attr: {style: 'background-image: url(' + $context.row.flag + ')'}"></span>
</td>
</script>
</div>