modify field within datasource schema

[Lee]

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>    

[Lee]

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.

[Brittany]

Hi Lee, 

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