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

Splitting Data over multiple Views

1 Answer 31 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 2
Markus asked on 19 Dec 2013, 05:36 PM
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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Dec 2013, 09:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Markus
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Share this question
or