Splitting Data over multiple Views

2 posts, 0 answers
  1. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 19 Dec 2013 Link to this post

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Dec 2013 Link to this post

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