Action Sheet

5 posts, 0 answers
  1. Chris
    Chris avatar
    15 posts
    Member since:
    Jun 2011

    Posted 18 Nov 2014 Link to this post

    Hi,
    I cannot get an action sheet to open up when clicking / tapping on a row in a table. The rows are produced from a datasource and a template. I have tried  various methods and get nowhere. Does anyone know of a good example of binding the action sheet in a template?

    Thanks Chris

      <table id="tbl-items" style="width:100%;margin-left:20px;margin-right:20px;" class="rounded" >
                <thead>
                    <tr>
                        <th>QTY</th>
                        <th>DESCRIPTION</th>
                        <th> PART#</th>
                        <th>WEIGHT</th>
                        <th>PRICE</th>
                        <th>TOTAL</th>
                        <th>MONTHS SVC</th>
                        <th>DATE</th>
                    </tr>
                </thead>
                <tbody data-template="tmpl-pickups" data-bind="source:pickups" >            </tbody>
            </table>


    <script type="text/x-kendo-template" id="tmpl-pickups">
        <tr >
            <td>#=Quantity#</td>
            <td>#=Description#</td>
            <td>#=PartNumber#</td>
            <td>#=Weight#</td>
            <td>#=UnitPrice#</td>
            <td>#=Total#</td>
            <td>#=MonthsService#</td>
            <td>#=DateCode#</td>
           
        </tr>
       
             <ul id="actionsheet" >
        <li><a href="##" data-action="Delete">Delete</a></li>
        <li><a href="##" data-action="Update">Update</a></li>
    </ul>
    </script>

    And in JS
          $('#actionsheet').kendoMobileActionSheet({type: 'tablet'});
                $('#tbl-items').on("click","tr",function(){$('#actionsheet').data("kendoMobileActionSheet").open(pickups.data())});

  2. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 20 Nov 2014 Link to this post

    Hello Chris,

    In order for the ActionSheet widget open() method to work on tablets, you need to specify a target, so that the ActionSheet can appear next to it. You can find the documentation of the open() method here and as you can see under parameters - "Notice: The target element is mandatory on tablets, as the ActionSheet widget positions itself relative to opening element when a tablet is detected.". Here is how the code that opens the ActionSheet should look like:
    $('#tbl-items').on("click", "tr", function () {
        $('#actionsheet').data("kendoMobileActionSheet").open($('#tbl-items'), pickups.data())
    });

    I hope this works on your side. If it doesn't, please send me your whole project, so that I can investigate the issue further.

    I am looking forward to your reply.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Chris
    Chris avatar
    15 posts
    Member since:
    Jun 2011

    Posted 25 Nov 2014 in reply to Martin Yankov Link to this post

    Hi,
    The action sheet is now appearing on the tablet but my 2 actions are causing a Unknown TypeError to come up when the action is selected. I ahve attached the JS and HTML files if they can help.

    Chris

  4. Martin Yankov
    Admin
    Martin Yankov avatar
    177 posts

    Posted 27 Nov 2014 Link to this post

    Hello Chris,

    Due to the nature of the ActionSheet widget, it is actually not loaded within the view. If you start your project in the simulator you will notice that it is outside of any views. I am not sure if this is clearly stated in our documentation. You can see here, that it says "The callback can be either a function, or a method of a JavaScript object in the global scope." In your case, you should declare your ActionSheet like this:
    <ul id="actionsheet" data-role="actionsheet">
        <li><a href="#" data-action="app.PickupItems.deletePickup">Delete</a></li>
        <li><a href="#" data-action="app.PickupItems.updatePickup">Update</a></li>
    </ul>

    Also, I noticed that you have two ActionSheets with the same id in your view. The first one is on the top and the second one is in the Kendo template. You should remove the one in the Kendo template as that way you will end up with multiple ActionSheet widgets - one for every row, while you need only one. You can see how to pass a context parameter to the data-action handler in the same article here.

    Let me know if you have any further questions.

    Regards,
    Martin Yankov
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Chris
    Chris avatar
    15 posts
    Member since:
    Jun 2011

    Posted 28 Nov 2014 in reply to Martin Yankov Link to this post

    Thanks Martin,
    everything is working .

    Cheers Chris
Back to Top