How to customize kendo multi select dropdown group header

Question

I'm trying to customize my kendo multiselect control's group header. I have checked the documentation below,

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

no matter how I change the groupTemplat, the group always display in top right. Please check my code below,

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);
        }
    }
}

I want to implement the multi-select dropdown like the Location option in this website.

When I checked the group, then all of the items in this group should be selected.