Data-driven Action Sheet

9 posts, 0 answers
  1. David T.
    David T. avatar
    4 posts
    Member since:
    Aug 2007

    Posted 13 Feb 2013 Link to this post

    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?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 15 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Randy
    Randy avatar
    72 posts
    Member since:
    Jan 2009

    Posted 24 May 2013 Link to this post

    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
  5. David T.
    David T. avatar
    4 posts
    Member since:
    Aug 2007

    Posted 24 May 2013 Link to this post

    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.
  6. Randy
    Randy avatar
    72 posts
    Member since:
    Jan 2009

    Posted 26 May 2013 Link to this post

    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
  7. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 28 May 2013 Link to this post

    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!
  8. David T.
    David T. avatar
    4 posts
    Member since:
    Aug 2007

    Posted 28 May 2013 Link to this post

    @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.
  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 May 2013 Link to this post

    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!
  10. Maxim
    Maxim avatar
    16 posts
    Member since:
    Jun 2008

    Posted 25 Jun 2014 Link to this post

    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









Back to Top
Kendo UI is VS 2017 Ready