如何使用 kendo ui 分组，使用 angular，正确地使用行模板？

Question

当您使用 Kendo UI 网格分组并使用行模板时，您会丢失一列并且它们与 header 行错位。我找到了几个解决方案，但它们都是基于使用 jquery 而不是 AngularJs.

类似的问题，但它使用的是 jQuery 与 Angular。 kendo Grid grouping incompatibility with row template

我也有同样的错误：http://www.kendoui.com/forums/ui/grid/grid-grouping-problem-when-using-row-template-bug.aspx#1948937

区别在于我没有使用 jQuery，我使用的是 Angular。

我在 html 中定义了一个 kendo ui 网格，如下所示：

HTML

<div kendo-grid="vm.myTaskListGrid" k-options="vm.gridOptions"></div>

<script id="tmpl-myTask-list-row" type="text/x-kendo-tmpl">
    <tr>
        <td><a href="\#/details/#:id#">#:projectName#</a></td>
        <td>#:name#</td>
        <td>#:statusName#</td>
        <td>#:parentTaskName#</td>
        <td>
            #:plannedCompletedDate#
            #:estimatedCompletedDate#
        </td>
        <td>
            <button type="button" class="btn btn-blue btn-sm" data-ng-click="vm.edit(#:id#)"><i class="fa fa-edit" /></button>
        </td>
    </tr>
</script>

我的控制器是这样设置的..

Angular 控制器：

vm.gridOptions = {
            dataSource: {
                transport: {
                    read: getMyTaskList
                },
                group: { field: "projectName" },
                pageSize: 25,
                sort: {
                    field: 'firstname',
                    dir: 'asc'
                }
            },
            sortable: true,
            pageable: true,
            groupable: true,
            rowTemplate: kendo.template($('#tmpl-myTask-list-row').html()),
            columns: [
            {
                title: 'Project Name',
                field: 'projectName',
            },
            {
                title: 'Name',
                field: 'name'
            },
            {
                title: 'Status',
                field: 'statusName'
            },
            {
                title: 'Dependent Task',
                field: 'parentTaskName'
            },
            {
                title: 'Dates'
            },
            {
                title: ''
            }]
        };

        function getMyTaskList(options) {
            myTaskService.getMyTaskList(2, vm.showDone).then(function (response) {
                options.success(response);
            });
        };

Angular 服务：

根据要求添加此内容，并注意当我不尝试使用 #-- 行模板和 $.proxy 行修复此问题时网格工作正常。

function getMyTaskList(userId, showDone) {
            return $http.get("/api/tasks/getMyTaskList?userId=" + userId + "&showDone=" + showDone);
        }

我试过添加建议的

在我加的腰带上：

        #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #

但我读到你必须添加 $.proxy

$.proxy(kendo.template($('#tmpl-myTask-list-row').html()), getMyTaskList),

但控制器上的 $.proxy 似乎不起作用。如果我有 #= new Array... 代码到行模板并且不包含 $.proxy 我得到错误

TypeError: undefined is not a function

如何使 kendo ui 分组与 angular 一起正确使用行模板？

Answer 1

正如我所说，你需要

首先通过 new kendo.data.DataSource、
将其设置为 gridOptions 上的道具和
将其绑定到模板而不是 getMyTaskList

JS:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: getMyTaskList
    },
    group: {
        field: "projectName"
    },
    pageSize: 25,
    sort: {
        field: 'firstname',
        dir: 'asc'
    }
});
var t = $.proxy(kendo.template($('#tmpl-myTask-list-row').html()), dataSource);   

vm.gridOptions = {
    dataSource: dataSource,
    sortable: true,
    pageable: true,
    groupable: true,
    rowTemplate: t,
    columns: [{
        title: 'Project Name',
        field: 'projectName',
    }, {
        title: 'Name',
        field: 'name'
    }, {
        title: 'Status',
        field: 'statusName'
    }]
};

如何使用 kendo ui 分组，使用 angular，正确地使用行模板？

How do you get kendo ui grouping, with angular, working properly with row templates?

kendo-ui

angularjs

kendo-grid