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

2 posts, 0 answers
  1. Djamy
    Djamy avatar
    1 posts
    Member since:
    Jan 2014

    Posted 17 Feb 2014 Link to this post

    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 kendo.data.DataSource({
                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=' + e.data.uid);
            return {
                recipes: recipesModel.recipes,
                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 !

  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 19 Feb 2014 Link to this post

    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!
Back to Top