Action Sheet

[Chris]

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())});

[Martin Yankov]

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

 

 

[Chris]

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

​

[Martin Yankov]

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

 

 

[Chris]

Thanks Martin,
everything is working .

Cheers Chris
​