How to put multiple commands buttons into one split-button dropdown in Kendo grid?

Question

I am a beginner in Kendo UI and Bootstrap.

My current problem is: I have a kendo grid with four custom command buttons (Check Profile, Contact, Edit, Delete). I want to show these four buttons in one Bootstrap split dropdown button (http://getbootstrap.com/components/#btn-dropdowns). The button itself should be "Check Profile", and when I click the little dropdowns, the other three command buttons should be available.

Could anyone help me with this, please?

23/8/2016 Edit:

This is what I have so far, but honestly I don't fully understand it so I am not be able to improve it.

$('.profile-menu').each(function (i, e) {
    var dropdownTemplate = "<div class='btn-group btn-group-xs'>" +
                                "<button type='button' class='btn btn-danger'> Check Profile </button>" +
                                "<button class='btn btn-danger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" +
                                    "<span class='caret'></span>" +
                                "</button>" +
                                "<ul class='profile-menu dropdown-menu' role='menu'>";
    var dropdownList = "";

    $('a', e).each(function (ind, elem) {
        dropdownList = dropdownList + "<li><a href='#' class='" + $(this).attr("class") + "'>" + $(this).html() + "</a></li>";
    });

    dropdownTemplate = dropdownTemplate + dropdownList + "</ul></div>";
    $(this).html(dropdownTemplate);
});

The problem here is the style of dropdown list is completely different with button's style as command buttons are built-in in Kendo grid so they have default CSS. Also, the dropdown button (Caret) is somehow under the "Check Profile" button.

Another thing need to fix is that "Check Profile" button is invalid but there are four items in dropdown list including Check Profile, but I only need the other three commands in dropdowns and Check Profile should go to the "Check Profile" button.

Answer 1

Use the template for the command column. It should look like this:

var $grid = $("#grid").kendoGrid({
    dataSource: {
        type: "json",
        transport: {
            read: function (e) {
                // Just an example
                e.success({
                    Items: [
                        {
                            Id: 1,
                            Name: "Name1",
                            Surname: "Surname1"
                        },
                        {
                            Id: 2,
                            Name: "Name2",
                            Surname: "Surname2"
                        }
                    ],
                    Total: 2
                });
            }
        },
        schema: {
            data: "Items",
            total: "Total",
            model: {
                id: "Id",
                fields: {
                    Name: { type: "string" },
                    Surname: { type: "string" }
                }
            },
        }
    },
    pageable: {
        pageSize: 10
    },
    columns: [
        { field: "Id", hidden: true },
        {
            field: "Name",
            title: "Name",
            width: 170,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        },
        {
            field: "Surname",
            title: "Surname",
            width: 170,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        },
        {
            command: [ {
                template:
                '<div class="btn-group">' +
                    '<button type="button" class="btn btn-primary">Check Profile</button>' +
                    '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                        '<span class="caret"></span>' +
                        '<span class="sr-only">Toggle Dropdown</span>' +
                    '</button>' +
                    '<ul class="dropdown-menu">' +
                        '<li><a style="cursor:pointer">Contact</a></li>' +
                        '<li><a style="cursor:pointer">Edit</a></li>' +
                        '<li><a style="cursor:pointer">Delete</a></li>' +
                    '</ul>' +
                '</div>'
            }],
            title: "Actions",
            width: 50,
            headerAttributes: {
                style: "font-weight: bold;"
            }
        }
    ]
}).data("kendoGrid");

In the template you can also set CSS selectors to action buttons and then set click-handlers for them. But there will be some problems with cell overflow when you open dropdown. To make it work set style:

<style>
    .k-grid td {
        overflow: visible;
        white-space: nowrap;
    }
    .k-grid tr {
        height: 100px;
    }
</style>

And here is a div for grid:

<div id="example">
    <div id="grid"></div>
</div>

Edit: An image with the result of given code