Changing text of the 'Cancel' option in Actionsheet

6 posts, 1 answers
  1. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 04 Jul 2012 Link to this post

    How does one change the text of the 'Cancel' option in Actionsheet?

    The documentation states that there is an actionsheet configuration parameter of 'cancel', but gives no example how to apply such configurations. Is there some sort of actionsheet object that is supposed to be instantiated to do this?

    Thanks in advance
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jul 2012 Link to this post

    Hello John,

    Yes it is possible to change the default text of the cancel button through the cancel option.
    In order to apply the configuration you could use either the data-cancel attribute in the markup or to define the cancel property in the jQuery syntax initialization. For example:

    <ul id="inboxActions"
        data-role="actionsheet"
        data-open="onOpen"
        data-popup='{"direction": "left"}'
        data-cancel="custom cancel text">
            <li class="km-actionsheet-title">Monday Meeting:</li>
            <li><a href="#" data-action="reply">Reply</a></li>
            <li><a href="#" data-action="replyAll">Reply All</a></li>
            <li><a href="#" data-action="archive">Archive</a></li>
    </ul>

    //in the view init event handler
    $("#inboxActions").kendoMobileActionSheet({
        //.....
        cancel: "custom cancel text"
    });

    I hope this helps.

    Regards,
    Alexander Valchev
    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. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 10 Jul 2012 Link to this post

    Is there a way to pass a function into the data-cancel attribute?

    I tried the following:
    data-cancel="myFunction()"
    and data-cancel=myFunction()

    But as you may guess, it outputs the literal string "myFunction()". Are passing functions in any way possible?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Jul 2012 Link to this post

    Hello John,

    I am afraid that this is not supported - you cannot change the default action of the cancel button.

    As a general information, when you want to pass a function via data attribute in KendoMobile you should not add the brackets, but only the name of the function. For example:
    <li><a href="#" data-action="reply">Reply</a></li>
     
     
    function reply(e) {
        //do something
    }


    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 13 Jul 2012 Link to this post

    Sorry, I should have been more specific. The function that I want to specify in the data-cancel attribute is to purely return a string that will act as the text of the cancel button.

    For example, If I want my cancel-text to say "Close", hard coding it would look like this: 
    data-cancel="Close"

    But If I don't want to hard code it and I want the string to come from a function, I would think to do this:
    data-cancel=getString()
    where myFunction() returns the string "Close".

    Is this in any way possible?

    Thanks again, 
    John
  7. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 16 Jul 2012 Link to this post

    Hi John,

    Thank you for the clarification, however this is not supported either. The cancel attribute cannot be a function, it accepts only a string.
    If you wish you can init the actionsheet through jQuery plug in syntax - this will allow you to use a variable instead of string.
    function actionsheetInit() {
        $("#inboxActions").kendoMobileActionSheet({
             cancel: cancelStringVar,
             popup: {direction: "left"}
        });
    }

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready