Render an image in ojTable

jdadashev-Oracle

Is there an example of how to render an icon in the column of the ojTable.

The example in http://jet.us.oracle.com/trunk/uiComponents-table-customTable.html shows how to render a link or JET Rating Gauge Component,

but not a user defined image.

Thanks

Jim.Marion-Oracle

The public URL for custom cell templates is Table - Custom Cell Templates.

Here is a jsFiddle example of a custom template using Oracle JET's icon font: https://jsfiddle.net/jmarion/mqLqe2a2/. If you want to use real images instead of an icon font, then change the tag from <i> to <img> and use the attr: {src:...} binding as shown in this StackOverflow answer: http://stackoverflow.com/questions/10659665/knockout-template-using-data-bind-to-image-src-property-not-working.

Jim.Marion-Oracle

The public URL for custom cell templates is Table - Custom Cell Templates.

Here is a jsFiddle example of a custom template using Oracle JET's icon font: https://jsfiddle.net/jmarion/mqLqe2a2/. If you want to use real images instead of an icon font, then change the tag from <i> to <img> and use the attr: {src:...} binding as shown in this StackOverflow answer: http://stackoverflow.com/questions/10659665/knockout-template-using-data-bind-to-image-src-property-not-working.

jdadashev-Oracle

Thank you for answering my question, Jim!

I have one more if you don't mind.

In your jsFiddle example of a custom template using Oracle JET's icon font: https://jsfiddle.net/jmarion/mqLqe2a2

I tried to hide icons in some rows.

I made changes below but still all icons are  displayed.

What did I do wrong?

Thank you!

View:

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

     <i class="oj-fwk-icon" data-bind="if:$data.show, css: id"/>

</script>

ViewModel:

    var icons = [

      {id: 'oj-fwk-icon-magnifier', show:'true'},

      {id: 'oj-fwk-icon-cross', show:'false'},

      {id: 'oj-fwk-icon-cross02', show:'true'},

      {id: 'oj-fwk-icon-cross03', show:'false'}

      ....

    ];

Jim.Marion-Oracle

I am surprised that the if binding isn't working. I'm not sure what I did wrong, but I had the same result. Here is what I found that did work: I wrapped the <i> element in the ko if comment syntax. You can see an example here: https://jsfiddle.net/jmarion/2k9mdhjt/

The Visible binding also works: https://jsfiddle.net/jmarion/51p0jebn/

A couple of observations:

1. You don't need $data in front of your field reference.

2. If 'true' is supposed to be boolean, it doesn't need to be quoted. 'false' can be true in JavaScript. For example !!'false' === true, !!'true' = true. This just means the string has a value. Be sure to convert to a real boolean before the comparison happens.

One other thing I discovered is that the <i>'s in my example (custom template) were not wrapped in table cells (<td>'s). I corrected this in the fiddles.