Data-driven Action Sheet

[David T.]

Is there a built-in way to do an action sheet where the elements come from a data source?

I saw http://www.kendoui.com/forums/mobile/action-sheet/dynamic-action-sheet.aspx where another David asked about dynamic action sheets and using the technique you gave there, I was able to kinda accomplish it indirectly:

function LoadActionSheet()
{
        var strHtml = '<li class="km-actionsheet-title">Select Action</li>\r\n';

        jQuery.each(arrValidRoutes, function (i, val) {
            strHtml += '<li><a href="#" data-actionsheet-context="' + val.id + '" data-action="PerformAction">' + val.name + '</a></li>\r\n';
        });

        $("#MyActionSheet").data("kendoMobileActionSheet").destroy();
        $("#MyActionSheet").html(strHtml);
        kendo.init($("#MyActionSheet"), kendo.mobile.ui);    
}

My ActionSheet displays just fine using this code.

The problem I'm having is with finding out the ID of the item selected in my click handler - PerformAction.  I tried e.context, but I'm guessing that this is for the data-actionsheet-context of the calling link, not for the data-actionsheet-context of the selected action.

So (A) is there any way that I can pass the ID of my selected action to my event handler or (B) is there a built-in way to have a data-driven action sheet?

[Iliana Dyankova]

Hi David,

I am afraid what you would like to achieve is not supported by Kendo UI ActionSheet and there is no suitable workaround I can suggest. If you want you can submit your idea as a feature request at our UserVoice page - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation.

Kind regards,

Iliana Nikolova
the Telerik team

[Randy]

I think I have figured out a way that works. I would like to know if you see any problems with it. I am setting up the action sheet like:
 var carrierListUpdate = function () {
  var selectValues = selectionList.carriers;  var select = $('#serviceCarrierActions');
  select.data("kendoMobileActionSheet").destroy();
  select.html('<li class="km-actionsheet-title">Carrier:</li>');
  $.each(selectValues, function(key, value) {
   if (key != "") {
    var html = "<li><a href='#' ";
    html += 'onclick="app.serviceView.carrierSelect(\'' + key + '\')">';
    html += value;
    html += "</a></li>";
    select.append(html);
   }
  });
  kendo.init(select, kendo.mobile.ui);
 };

It doesn't have an data-action, but uses the onclick and calls a routine with a parameter. It seems to work and even closes the action sheet, which I expected to have to do myself.

So far in testing I haven't seen a problem and seems to be a viable work around.

Randy

[David T.]

I seem to remember trying something similar when I was initially working on this and I'm going off of memory from three months ago, but I think maybe it worked when I tried it in Firefox or Chrome on my PC, but didn't work on the iPhone itself? 

Of course, there have been multiple updates to Kendo since then, so my experience at the time may not be relevant any more.

We wound up just dispensing with it and not using the action sheet at all.  We just implemented our particular need on a separate page using just a normal dynamic list view.

[Randy]

I found the same thing. I am running in Icenium and it worked great on the emulator, but on my Android, the click event only worked once. I think it has something with me in effect replaying the parent object they pass in with a string.

I do find it odd that they consider the originator the parent of the item you actually selected. There doesn't seem to be anyway of getting to the item you actually selected, which works great until you get to a data driven variable list. In my case there are only 9 possible buttons and no real way of adding since the action sheet doesn't scroll. I was looking for a way of making it easier to maintain more than anything. That is add an item to a JSON object and have it implemented through out the app.

I think the platform is great, but finding out that there are some issues with the emulator.

Randy

[Steve]

Hello Randy,

We've intentionally used the word "simulator" instead "emulator" in order to emphasize that it simulates the cordova and web environment and does not actually emulate the real device.

With that said, we're currently working on improving the simulator behavior so that it is more on par with the behavior you observe on actual devices.

Regards,
Steve
Telerik

[David T.]

@Randy, yep, and keep in mind it's actually less than 9 items because if you turn your device sideways, then you have an even smaller number.  On the iPod Touch I'm using for development, I think it gives you four items at most ... which really isn't a lot.

I love the look of the Actionsheet and would love to use it if it could be done dynamically and support more than four items, but it just wasn't practical for our needs.

[Petyo]

Hi David,

A very similar effect can be achieved with the dropdown widget when added in a mobile app - check this example. In addition to that, the dropdown widget supports databinding and scrolling.

Regards,
Petyo
Telerik

[Maxim]

Looks like I found a working workaround for data-driven actionsheet. It is based on solution provided in previous posts.

var vm = Details.viewModel;
var actionsheet = $("#details-action-actionsheet");
actionsheet.data("kendoMobileActionSheet").destroy();

var actionSheetHtml = "<li><a href=\"#\" data-action=\"Details.viewModel.save\">Save</a></li>";
if (vm.NextStates) {
for (var i = 0; i < vm.NextStates.length; i++) {
var state = vm.NextStates[i];
actionSheetHtml += "<li><a href=\"#\" id=\"d-s-s-" + state.Id + "\" data-action=\"Details.viewModel.saveNextState" + state.Id + "\">Save - " + state.Name + "</a></li>";
actionSheetHtml += "<script language=\"javascript\">DetailsViewModel.prototype.saveNextState" + state.Id + " = function() {   Details.viewModel.saveNextState('" + state.Guid + "'); }; </script>";
}
}

actionsheet.html(actionSheetHtml);
kendo.init(actionsheet, kendo.mobile.ui);


This solution does not use onclick event (which is not working on mobile) but rather uses usual data-action attribute. To make it work I extend my viewmodel prototype with custom functions.

Looks like it works on desktop and mobiles.

Hope it can help someone