我有一个kendoGrid指令,该指令还监视一个名为
的范围变量objectSource
这样我就可以在一些用户交互时更改数据。
但是,在初始渲染之后,每次更新数据时,都会复制kendoGrid边框。以下是它的外观:kendoGrid包装器已经应用了很多次。
这是指令的样子:
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
});
}
我试图销毁这个元素并在数据发生变化时清空它,但没有帮助。
如果我只是更改数据源,我就能解决问题,但不仅数据我必须更改列,而且剑道似乎不允许动态更改列。
任何想法,建议都将受到高度赞赏。
答案 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); //设置为空数据源