Action Buttons

Starting with the 2025 Q2 release, the ActionSheet allows configuring the orientation and layout of the action buttons.

Orientation

By default, the ActionSheet component displays the action buttons in horizontal orientation, but also allows you to set their visualization to vertical. You can control this behavior with the actionButtonsOrientation configuration option.

To configure the orientation of the action buttons, set the actionButtonsOrientation option to one of the following values:

• vertical
• horizontal

The example below demonstrates the action buttons appearance in both horizontal and vertical modes.

    <div>
        <label for="orientation">Orientation:</label>
        <select id="orientation">
            <option value="vertical">vertical</option>
            <option value="horizontal">horizontal</option>
        </select>
    </div>
   

    <button id="open">Open Actionsheet</button>
    <div id="actionsheet"></div>
    <script>
        var actionsheet = $('#actionsheet').kendoActionSheet({
            title: 'Select item',
            actionButtonsOrientation: 'vertical',
            actionButtons: [
                {
                    icon: "check",
                    fillMode: "solid",
                    themeColor: "primary",
                    rounded: "full",
                    size: "large",
                    text: "Confirm"
                },
                {
                    icon: "x",
                    fillMode: "flat",
                    size: "large",
                    text: "Close"
                }
            ]
        }).data('kendoActionSheet');

        $('#open').kendoButton({
            themeColor: 'primary',
            click: function(){
                actionsheet.open();
            }
        })

        $("#orientation").kendoDropDownList({
            change: function(e){
                actionsheet.setOptions({
                actionButtonsOrientation: $("#orientation").val()
            });
            }
        });
    </script>

Alignment

The ActionSheet component supports multiple types of actionButtonsAlignment. By default, the action buttons are rendered stretched. This alignment of the action buttons works only when the actionButtonsOrientation is set to horizontal mode. The supported values are:

• stretched
• justify
• start
• center
• end

The example below demonstrates all alignments:

     <div>
        <label for="alignment">Alignment:</label>
        <select id="alignment">
            <option value="start">start</option>
            <option value="end" >end</option>
            <option value="center">center</option>
            <option value="stretched" selected="true">stretched</option>
            <option value="justify">justify</option>
        </select>
    </div>

    <div id="actionsheet"></div>
    <script>
        var actionsheet = $('#actionsheet').kendoActionSheet({
            title: 'Select item',
            items: [
                    {
                        text: 'Add to Favorites',
                        iconClass: 'k-i-heart',
                    }
            ],
            actionButtons: [
                {
                    icon: "check",
                    fillMode: "solid",
                    themeColor: "primary",
                    rounded: "full",
                    size: "large",
                    text: "Confirm"
                },
                {
                    icon: "x",
                    fillMode: "flat",
                    size: "large",
                    text: "Close"
                }
            ]
        }).data('kendoActionSheet');


        $("#alignment").kendoDropDownList({
            change: function(){
                actionsheet.setOptions({
                    actionButtonsAlignment: $("#alignment").val()
                });
                actionsheet.open();
            }
        });
    </script>

See Also

• Orientation of the ActionSheet (Demo)
• JavaScript API Reference of the ActionSheet