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

Display relations between models (many-to-one) in a list

1 Answer 49 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Djamy asked on 17 Feb 2014, 04:24 PM
Hello there !

I'm a super-noob here and my question may seems totally obvious for you guys but i'm totally lost and I'm here to find salvation :)

What I want to do ?

I want to display relation of my model in a list.

How am I trying to do so ?

I'm using the backend services to store my datas and I created two Types. One for my Recipes (I'm trying to create a recipes application) and another for my ingredients named Elements.
So, I created a Recipe called "Recipe 1" in which I linked 2 elements in a field name Elements.

Here is my Recipes table structure:

Id Identifier
CreatedAt Date
TimeModifiedAt DateTime
CreatedBy <-> Users Relation
ModifiedBy <-> Users Relation
Owner <-> Users Relation
Name Text
Elements <-> Elements Relation (multiple)

Now, I don't know how to retrieve Elements' names neither how to create my model..

<!-- my view -->
<div id="status-container" class="user-status-wrp cf" data-role="listview" data-style="inset">
    <div class="recipe-content">
        <h2 id="recipeName" class="recipe-name" data-bind='text: Name'></h2>
        <span id="activityDate" class="time-span" data-bind="text: CreatedAtFormatted"></span>
        <ul data-bind="source: " data-template="elementsTemplate" data-role="listview" data-style="inset">

<!-- my template -->
<script type="text/x-kendo-template" id="elementsTemplate">
    <li data-role="touch">#:Id#</li>

 * Recipes view model
var app = app || {};
app.Recipes = (function () {
    'use strict'
    // Recipes model
    var recipesModel = (function () {
        var recipeModel = {
            id: 'Id',
            fields: {
                Name: {
                    field: 'Name',
                    defaultValue: ''
                CreatedAt: {
                    field: 'CreatedAt',
                    defaultValue: new Date()
                Elements : {
                    field: 'Elements',
                    defaultValue: '',
                    type: 'relation'
            CreatedAtFormatted: function () {
                return app.helper.formatDate(this.get('CreatedAt'));
        // DataSource by Everlive
        var recipesDataSource = new{
            type: 'everlive',
            schema: {
                model: recipeModel
            transport: {
                // Nom du Model
                typeName: 'Recipes'
            change: function (e) {
                if (e.items && e.items.length > 0) {
                } else {
            sort: { field: 'Name', dir: 'asc' }
        return {
            recipes: recipesDataSource
    // Recipes view model
    var recipesViewModel = (function () {
        //Affichage d'une recette
        var recipeSelected = function (e) {
            app.mobileApp.navigate('views/recipeView.html?uid=' +;
        return {
            recipeSelected: recipeSelected,
    return recipesViewModel;

I know there is something wrong somewhere but I can identify exactly what and where...

Also, I don't know if I just explained my problem properly but ask me anything about my code if it's needed.

Thanks for reading !

1 Answer, 1 is accepted

Sort by
Kiril Nikolov
Telerik team
answered on 19 Feb 2014, 03:28 PM
Hi Djamy,

I am afraid that I was not able to understand your question. Could you please elaborate a bit more or send us a runnable example in a jsBin/jsFiddle, so we can take a deeper look, as your current example is incomplete?

I would also suggest you to check the following article showing an example how to use MVVM binding in Kendo UI Mobile application:

Kiril Nikolov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
ListView (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question