如何自定义kendo多选下拉组头

Question

我正在尝试自定义我的kendo多选控件的组头。我查看了下面的文档，

https://demos.telerik.com/kendo-ui/multiselect/grouping

无论我如何更改groupTemplat，该组始终显示在右上角。请检查下面的代码，

var checkInputs = function (elements) {
    elements.each(function () {
        var element = $(this);
        var input = element.children("input");
        input.prop("checked", element.hasClass("k-state-selected"));
    });
};

function initData() {
    $scope.dataOptions = {
        dataSource: getDataSource(),
        dataTextField: "value",
        itemTemplate: "<input type='checkbox'/> #:data.value# ",
        groupedTemplate: "<input type='checkbox'/> #:data#",
        autoClose: false,
        dataBound: function () {
            var items = this.ul.find("li");
            setTimeout(function () {
                checkInputs(items);
            });
        },
        change: function () {
            var items = this.ul.find("li");
            checkInputs(items);
        }
    }
}

我想实现多选下拉菜单，例如this website中的位置选项。

当我检查组时，应该选择该组中的所有项目。