Binding to Listview, custom handling image URL

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    15 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2014 Link to this post

    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>
    <!-- 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">
                <td rowspan="3" style="vertical-align:top">
                    <img src="#: data.CoverURL #" width="75" />
                <td><div style="font-size: large; font-weight:bold">#: data.Title #</div></td>

    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?

  2. Daniel
    Daniel avatar
    15 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2014 in reply to Daniel Link to this post

    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{
            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;

  3. Kaloyan
    Kaloyan avatar
    871 posts

    Posted 09 Sep 2014 Link to this post

    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.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top