CRUD operations on datasource in different remote view

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

    Posted 10 May 2012 Link to this post

    I am building a mobile application and am using the datasource feature to perform CRUD operations.  The buttons that initiate the destroy and update on the transport are in a different view from where the datasource is described.

    For example, the listmessages view has a listView widget to display all the messages (from the datasource), when one is selected, they are directed to the viewmessage remote view.

    When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).

    I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.

    Hope this makes sense.  Please see my code for a better idea of what I am trying to achieve.

    <div data-role="view" data-title="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(){
               
              var dataSource = new kendo.data.DataSource({
                 
                transport: {
                    read: "/messages/data",
                    dataType: "json",
                    update: {
                        url:  function() {
                            //where id is a global variable
                            var url = "/messages/markasread/" + id + "/" + read;
                            return url;
                        },
                        type: "POST",
                        dataType: "json"
                        //other configurations
                    },            
      
                    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" },
                          customer_name: { 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>
        <div data-role="view" data-title="Mobile" id="viewmessage" data-init="viewMessageInit">
        <h2>Message</h2>
            <p>Date: <?=$message->message->created?></p>
            <p>From: <?=$message->message->customer_name?></p>
            <p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>
            <p>Telephone: <?=$message->message->customer_telephone?></p>
            <p>Location IP:<?=$message->message->ip?></p>
            <div data-role="scroller">
                <p><?=$message->message->message?></p>
            </div>
            <?php $read_text = ($message->message->isnew == 1 ? 'Mark as read' : 'Mark as unread'); ?>
            <?php $read = ($message->message->isnew == 1 ? 0 : 1); ?>
            <p><a data-align="left" data-role="button" id="markasread" ><?=$read_text?></a>
            <a data-align="right" data-role="button" id="delete">Delete</a></p>
             
        </div>
        <script>
      
          
        function viewMessageInit(){
              //var selected is defined in previous view - how to access this?
              $("#markasread").click(function(){    
                selected.set("isnew", read);  
                dataSource.sync();        
              }); 
                
              $("#delete").click(function(){
                dataSource.remove(selected);
                dataSource.sync();        
              }); 
                        
      
        }
          
    </script>

    Many thanks in advance for any advice.
  2. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 11 May 2012 Link to this post

    Update:

    I now have the CRUD operations working but am still struggling to find how to get the datasource info for a selected id.  When the user selects  an item from the list they are taken to another pages to be show n the full details for that item.   This is currently being pulled out via PHP when I should be able to access this from the datasource.  I'm struggling to find the syntax on how to do this. Any suggestions much appreciated.
  3. Kendo UI is VS 2017 Ready
Back to Top