Question

我有一个kendoGrid指令，该指令还监视一个名为

的范围变量

objectSource

这样我就可以在一些用户交互时更改数据。

但是，在初始渲染之后，每次更新数据时，都会复制kendoGrid边框。以下是它的外观：kendoGrid包装器已经应用了很多次。

KendoGrid repeating border

这是指令的样子：

angular.module('foo.directives')
.directive('fooKendoUiGrid', ['kendoUIArgument', '$rootScope', function (kendoUIArgument, $rootScope) {

    return {
        restrict: 'E',
        scope: {
            objectSource: '=',
            editcolumnWidth: '@',
            deletecolumnWidth: '@',
            columnList: '=',
            height: "@",
            pageSize: "@",
            buttonCount: "@",
            customFilter: '=',
            defaultColumn: '@'
        },

        link: function (scope, elem, attrs) {
            scope.Headersloaded = false;
            scope.dataloaded = false;
            scope.increment = 0;
            if (!scope.id) {
                elem.id = "grid";
            } else {
                elem.id = scope.id;
            }

            scope.$watch('objectSource', function (newVal) {
                if (newVal && newVal.length > 0) {
                    elem[0].innerHTML = '';
                    elem[0].nextSibling.outerHTML = '';

                    if (scope.pageSize && scope.pageSize > 0) {
                        if (scope.columnList) {

                            } else {
                            elem.kendoGrid({
                                dataSource: { data: newVal, pageSize: parseInt(scope.pageSize), },
                                pageable: {
                                    buttonCount: parseInt(scope.buttonCount),
                                    pageSizes: true,
                                    refresh: true
                                },
                                columns: scope.columnList,
                                filterable: false,
                                columnMenu: false,
                                sortable: true,

                                height: scope.height
                            });

                        }

我试图销毁这个元素并在数据发生变化时清空它，但没有帮助。

如果我只是更改数据源，我就能解决问题，但不仅数据我必须更改列，而且剑道似乎不允许动态更改列。

任何想法，建议都将受到高度赞赏。

Answer 1

我没有找到任何优雅的解决方案。

我最终做了这样的事情：

scope.$watch('objectSource', function (newVal, oldVal) {
if ($(elem.parent()).hasClass('k-grid')) {
   $(elem.parent()).replaceWith($(elem));
}

每次渲染指令时，kendoGrid都会添加一个边框，当指令重新绘制时，边框会重复。所以上面的jQuery代码基本上清理了任何带有新指令边框的div。

Answer 2

您可以使用kendo“SetDataSource（）”

替换网格内容

var ds = new kendo.data.DataSource（）;   var grid = $（＆＃39; #grid＆＃39;）。data（＆＃34; kendoGrid＆＃34;）; //或指令中的$元素

grid.setDataSource（DS）; //设置为空数据源

参考答案：How to use SetDataSource Method of the Kendo UI Grid

angularjs指令kendoGrid重复边框

2 个答案: