How to show a value from inner object in ojTable with oracle jet

Question

I need to show the value of an inner pojo's fields in ojTable .

Here is the bakcend codes:

public class Profile implements Serializable {
private String descr;
private Location location;   // I need to show on table -> ojtable
}


public class Location implements Serializable {
private Long id;
private String locationName;
}

And the html code:

<table id="table" summary="Subscriber List"
data-bind="ojComponent: {component: 'ojTable',
emptyText: 'No Data',
data: dataSource,
selectionMode: {row: 'single'},
columnsDefault: {sortable: 'enabled'},
dnd: {reorder: {columns: 'enabled'}},
columns:
[{headerText: 'Description',
field: 'description'},
{ headerText: 'Location Name',
field: 'location.locationName'}  ----->>>>>> This one is not working
],
rootAttributes: {'style':'width: 100%; height:100%;'}}">
</table>

On this scenario I have Profile objects and need to reach the inner Location object's locationName field in the html side. I tried dot notaion -> location.locationName but it doesn't work.

I also tried custom renderer/knockout template but they both requires a new js functinon for every field I need to show, which is not generic I think.

Please help me to achieve this.

Thanks in advance.

Answer 1

As I understand the smoothest way to show and organize the ojTable is using Custom Row Templates as in the example:

<script type="text/html" id="row_tmpl">

    <tr>
        <td data-bind="text: location.locationName">
        </td>
        <td data-bind="text: location.id">
        </td>
    </tr>

</script>

Note that the order of the elemnts should be fit with the order of ojTable columns's names .