angularjs指令kendoGrid重复边框

时间:2014-05-16 16:55:39

标签: angularjs kendo-ui angularjs-directive kendo-grid

我有一个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
                            });

                        }

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

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

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

2 个答案:

答案 0 :(得分:0)

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

我最终做了这样的事情:

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

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

答案 1 :(得分:0)

您可以使用kendo“SetDataSource()”

替换网格内容
  

var ds = new kendo.data.DataSource();   var grid = $(' #grid')。data(" kendoGrid"); //或指令中的$元素

     

grid.setDataSource(DS); //设置为空数据源

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