modify field within datasource schema

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

    Posted 09 May 2012 Link to this post

    What is the best way to call my short_text() function so that I have a new shortMessage field in my datasource schema? I want to pass the Message field to the function and create a new field called shortMessage and have this used in the template.  Is this even possible at all?

        <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>
            <ul id="message_list"></ul>
        </div>
         
        <script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= message #</div></a></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);
          }
     
              var dataSource = new kendo.data.DataSource({
                
                transport: {
                    read: "/messages/data",
                    dataType: "json",
                    update: {
                        url:  function() {
                            var url = "/messages/markasread/" + id + "/" + read;
                            return url;
                        },
                        type: "POST",
                        dataType: "json"
                    },             
     
                    destroy: {
                        url:  function() {
                            //where id is a global variable
                            var delurl = "/messages/delete/" + id;
                            return delurl;
                        },                     
                        type: "DELETE",
                        dataType: "json"
                    }
                             
                },               
                schema: {
                  model: {
                      id: "id",
                      fields: {
                          created: { type: "string" },
                          message: { type: "string" }, 
                  //shortMessage: - how to call the short_text() function here?  Is it possible??
                          customer_name: { type: "string" },   
                          customer_telephone: { type: "string" },
                          ip: { type: "string" },
                          created: { type: "string" }, 
                          email: { type: "string" },
                          isnew: { type: "string" }
                         }
                     }
                 }      
               });
     
              $("#message_list").kendoMobileListView({
                  dataSource: dataSource,
                  //pullToRefresh: true,
                  //appendOnRefresh: true,
                  style: "inset",
                  click: function(e) {
                    var id = e.dataItem.id;
                    var selected = dataSource.get(id);
                    window.kendoMobileApplication.navigate("/messages/view/" + id);
                  },         
                  template: $("#message_list_template").text()
              });
               
         }
        </script>
         
        <style>
        #listmessages div.isnew_1 {font-weight:bold}
        #listmessages div.isnew_0 {font-weight:normal}
         
       </style>    
  2. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 10 May 2012 Link to this post

    I have found the solution.

    I created 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.

    <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>
            <ul id="message_list"></ul>
        </div>
         
        <script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= shortMessage #</div></a></script>
     
    <script>
     
         function listMessagesInit(){
     
              var dataSource = new kendo.data.DataSource({
                
                transport: {
                    read: "/messages/data",
                    dataType: "json",
                    update: {
                        url:  function() {
                            var url = "/messages/markasread/" + id + "/" + read;
                            return url;
                        },
                        type: "POST",
                        dataType: "json"
                        //other configurations
                    },               
     
                    destroy: {
                        url:  function() {
                            var delurl = "/messages/delete/" + id;
                            return delurl;
                        },                       
                        type: "DELETE",
                        dataType: "json"
                    }
                             
                },                   
                schema: {
                  model: {
                      id: "id",
                      fields: {
                          created: { type: "string" },
                          message: { type: "string" },
                          shortMessage:{ type: "string" },
                          customer_name: { type: "string" },   
                          customer_telephone: { type: "string" },
                          ip: { type: "string" },
                          created: { type: "string" },   
                          email: { type: "string" },
                          isnew: { type: "string" }   
                         }
                     },
                    parse : function(data) { //reduce text of message if being used for list
                            $.each(data, function(i, val){
                                var message = val.message;
                     
                                 if (message.length > 100){
                                   var shortText = jQuery.trim(message).substring(0, 100).split(" ").slice(0, -1).join(" ") + "...";
                                 } else {
                                   var shortText = message;
                                 }                       
         
                                val.shortMessage = shortText;
                            });
                        return data;
                        }               
                 },
         
                                                   
               });
     
              $("#message_list").kendoMobileListView({
                  dataSource: dataSource,
                  //pullToRefresh: true,
                  //appendOnRefresh: true,
                  style: "inset",
                  click: function(e) {
                    var id = e.dataItem.id;
                    var selected = dataSource.get(id);
                    window.kendoMobileApplication.navigate("/messages/view/" + id);
                  },         
                  template: $("#message_list_template").text()
              });
               
         }
        </script>


    Hope this helps someone else.

  3. Kendo UI is VS 2017 Ready
  4. Brittany
    Brittany avatar
    1 posts
    Member since:
    Jun 2016

    Posted 10 Aug Link to this post

    Hi Lee, 

    Just wanted to say thank you for sharing this. Saved me so much time. Great solution. Cheers.

Back to Top