This is a migrated thread and some comments may be shown as answers.

Binding to Listview, custom handling image URL

2 Answers 56 Views
HTML5, CSS, JavaScript
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Daniel
Top achievements
Rank 1
Daniel asked on 04 Sep 2014, 04:28 PM
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?







2 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 04 Sep 2014, 04:54 PM
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;
            },
        }
    }),




0
Kaloyan
Telerik team
answered on 09 Sep 2014, 11:46 AM
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
 

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

 
Tags
HTML5, CSS, JavaScript
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Kaloyan
Telerik team
Share this question
or