initiate function for each datasource item in template

2 posts, 0 answers
  1. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 30 Apr 2012 Link to this post

    I have a datasource which I display in a listview and am using a template.  I want to be able to shorten the text of one of the datasource fields on page load and am struggling with how to do this.  Can any one point me in the right direction?  Below is what I have so far.

        <div data-role="view" data-title="Control Panel - Mobile" id="listmessages" data-init="listMessagesInit">
            <h2>Customer Messages</h2>
            <p><?php echo $unread_messages . ' - unread messages'; ?></p> <a data-align="right" data-role="button" id="markasread">Mark as read</a><a data-align="right" data-role="button" id="delete">Delete</a>
            <ul id="message_list"></ul>
        </div>
          
         
       <script id="message_list_template" type="text/x-kendo-template">
            <li class="isnew_#= isnew #" id="#= id #"><a href="/messages/view/#= id #">
               <div style="float:left; width:150px; height: 50px">#= customer_name #<br />#= created #</div>
               <div style="height: 50px" id="message_#= id #" data-bind="value:short_text(message_#= id #, #= message #)">#= message #</div>
           </a></li>
       </script>   
     
        <script>
     
         function listMessagesInit(){
              
            function short_text(id, message){
                if (message.length > 100){
                 var shortText = jQuery.trim(message).substring(0, 100).split(" ").slice(0, -1).join(" ") + "...";
                } else {
                 var shortText = message;
                }
                 
                $(id).text(shortText);
            }
     

         function listMessagesInit(){

              var messageDataSource = new kendo.data.DataSource({
               
                transport: {
                    read: "/messages/data",
                    dataType: "json",

                    update:function(id, isnew) {
                        url:  "/messages/markasread/" + id + "/" + isnew ;  //how should these vars be passed? like this
                        type: "POST"
                    },
                    destroy: {
                        url: function(id, isnew) {
                                return "/messages/delete/" + id  ;  //or like this?
                            },
                       // url: "/messages/delete/210643",
                        type: "DELETE"
                    },
                    parameterMap: function(options, operation) {  //not sure what this does or if I even need it
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }                
                },              
                error: function(e) {
                    alert(e.responseText);
                },              
                schema: {
                  model: {
                      id: "id",
                      fields: {
                          created: { type: "string" },
                          message: { type: "string" },
                          customer_name: { type: "string" },        
                          isnew: { type: "string" }    
                         }
                        
                     }
                 },
                      
               });

              $("#message_list").kendoMobileListView({
                  dataSource: messageDataSource,
                  //pullToRefresh: true,
                  //appendOnRefresh: true,
                  style: "inset",
                  template: $("#message_list_template").text()
              });
              
          

         

    }
  2. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 10 May 2012 Link to this post

    I managed to find the solution at last..

    I needed to create a new field in my schema called ShortMessage and added a parse function to the Scema which manipulates the field data.  This executes before the data is read.
Back to Top