[Solved] Binding to Listview, custom handling image URL

[Daniel]

Not sure if this is the right spot, but here goes anyway.

I am trying to figure out how to handle binding an image in a listview, but potentially modifying the data first.

Here is my HTML:

<div data-role="view" data-title="Results" data-layout="results" data-model="APP.models.results" >
    <ul data-role="listview" data-style="inset" data-template="booksTemplate" data-bind="source: ds"></ul>
</div>


<!-- this is the template used by the listview. template items are automatically
     wrapped in an <li> by Kendo UI Mobile -->
<script type="text/x-kendo-template" id="booksTemplate">
    <table>
        <tr>
            <td rowspan="3" style="vertical-align:top">
                <img src="#: data.CoverURL #" width="75" />
            </td>
            <td><div style="font-size: large; font-weight:bold">#: data.Title #</div></td>
        </tr>

    </table>

</script>

​
my issue is the CoverURL data could be a string value of "NoImage".  I need to parse it out and check if the value is NoImage, and if so, replace it.

I am using a kendo DataSource to grab the data from an Azure DB.


Anyone have any ideas?

[Daniel]

Fixed my own Problem....

A week of fighting with it, and once i put it here, i find my solution... :)

You need to add a Parse function to your schema...  hope this helps someone else one day...

    ds: new kendo.data.DataSource({

        transport: {
            read: function (options) {
.....
        },
        schema: {
            total: "totalCount",
            model: {
                id: "id",
                fields: {
                    ....
                }
            },
            parse: function (data) {
                console.log('PARSE: BEGIN');

                for (var i = 0; i < data.length; i++) {
                    console.log('URL: ' + data[i].URL);

                    if (data[i].URL == 'NoImage') {
                        data[i].URL = 'Assets/NoImage.png';
                    }
                }
                return data;
            },
        }
    }),

[Kaloyan]

Hi Daniel,

Thank you very much for sharing the solution with our community. It can surely help other AppBuilder and Kendo users in the future.

Have a nice week and happy coding.

Regards,
Kaloyan
Telerik