This is a migrated thread and some comments may be shown as answers.

Data-driven Action Sheet

8 Answers 190 Views
ActionSheet
This is a migrated thread and some comments may be shown as answers.
David T.
Top achievements
Rank 1
David T. asked on 13 Feb 2013, 08:19 PM
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?

8 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 15 Feb 2013, 03:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Randy
Top achievements
Rank 1
answered on 24 May 2013, 05:25 PM
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
0
David T.
Top achievements
Rank 1
answered on 24 May 2013, 05:38 PM
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.
0
Randy
Top achievements
Rank 1
answered on 26 May 2013, 01:56 PM
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
0
Steve
Telerik team
answered on 28 May 2013, 07:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David T.
Top achievements
Rank 1
answered on 28 May 2013, 02:23 PM
@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.
0
Petyo
Telerik team
answered on 30 May 2013, 01:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Maxim
Top achievements
Rank 2
answered on 25 Jun 2014, 01:04 PM
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









Tags
ActionSheet
Asked by
David T.
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Randy
Top achievements
Rank 1
David T.
Top achievements
Rank 1
Steve
Telerik team
Petyo
Telerik team
Maxim
Top achievements
Rank 2
Share this question
or