Splitting Data over multiple Views

[Markus]

Good day

I have the following task at hand.

I have a datasource which contains my data. I have more data then in the simple example but for explaining it will do.

For example

Name
Phone number
Shoe size
Age

At the moment I get the data from my SQL server by Web API returning JSON and I use a template to display the data on one view.

Now to make the icenium app a bit more userfriendly (I get more daten then in the example) I want to split the data over multiple views and use a tabstrip footer.

so views would be 

view-name
view-phone
view-shoe
view-age

I have no problem implementing the views, tabstrip footer and so on. 

What I don't know is how to split the data into 4 templates to bes used on 4 views . I want to make only one trip to the database of course.

Is this possible?

Markus

Here is the real code I am using at the moment.

Function is called from another view and redirects to the one view at the moment.

function getDetails(userID) {

    app.navigateTo("#view-firmen-details") ;

    var dataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: {
                url: "http://mobile.mydomain.com/api/T_users/GetUserByID/?id=" + userID,
                data:{
                    Accept: "application/json"
                }
            }
        },

      });

    $("#notfilterable-details").kendoMobileListView({
        dataSource: dataSource,
        template: $("#firmen-details-template").text(),
        dataBound: function(e) {

                 $("#User_text1").html($("#User_text1").html().replace(new RegExp("../images/kunden", "g"), 'http://www.zuol.ch/images/kunden'));
                 },

    });

}

This is a how I display the data at the moment

<div data-role="view" id="view-firmen-details"  data-layout="drawer-layout-back-firmen-details" data-title="Gewählte Firma" >

    <div data-role="content"  class="view-content" >
        <div id="notfilterable-details">

        </div>
    </div>
    <script type="text/x-kendo-tmpl" id="firmen-details-template">
        <h2>#=User_firmaname#</h2>
        <h4>
            Adresse & Kontakt
        </h4>
        <p>#=User_strasse# <br />
            #=User_plz# #=User_ort# <br /><br />
           Jetzt anrufen: <a href="tel:#=User_telefon#">#=User_telefon# </a><br /><br />
           Seite öffnen:  <a href="javascript:window.open('#=User_internet#','_blank','location=yes');" target="_blank">#=User_internet#</a>  <br /> </p>
        <h4>
            Öffnungzeiten
        </h4>

        <table style="width:90%;margin-left:5%;font-size:0.9em;">
            <tr>
                <td>
                    <b>Montag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_montag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Dienstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_dienstag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Mittwoch</b>
                </td>
                <td>  </td>
                <td>
                    #=User_mittwoch#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Donnerstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_donnerstag#
                </td>
            </tr>

            <tr>
                <td>
                    <b>Freitag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_freitag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Samstag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_samstag#
                </td>
            </tr>
            <tr>
                <td>
                    <b>Sonntag</b>
                </td>
                <td>  </td>
                <td>
                    #=User_sonntag#
                </td>
            </tr>
        </table>
        <p>
            <span id='User_text1'>#=User_text1#</span>
        </p>

    </script>

</div>

What I basicly want is to spread the content of 

firmen-details-template

on 4 views.


--------------

Hope someone can understand what I am trying to do :-)

Markus

[Alexander Valchev]

Hello Markus,

To achieve that you should break the template up into a few small ones. In order words to create 4 different Views, with 4 different ListView widgets with 4 different templates bound to one shared DataSource. In this way the dataSource will be read only once by the first ListView widget, the rest will use the already retrieved data but will display different parts of it (determined by the template).

Regards,
Alexander Valchev
Telerik