Question

当没有可显示的记录时，它应该在网格中显示自定义消息，消息将显示为带有kendo-grid-message但我无法更改其样式

代码：

<kendo-grid-messages
[style]="{'background-color':'#666', 'height':'500px','width':'100%'}"
[class]="no-data"
noRecords="There are no items to display.">
</kendo-grid-messages>

plunker：https://plnkr.co/edit/iGLJ06zRVYWDYedAtsDW?p=preview 参考：我使用以下示例来设置Kendo Grid的样式。网址：https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles 谢谢

Answer 1

创建条件元素。

<div *ngIf="noRecords"> message </div>

Answer 2

尝试使用混合风格和ng风格。

<div style='display:none' ng-style='HideAndShow'></div> <!--By Default Hidden -->

AngularJS

$scope.HideAndShow["display"]="none"; //Initialize 

if(1==1)   //if Condition true to hide message
 $scope.HideAndShow["display"]="";
else //if condition false and display message
 $scope.HideAndShow["display"]="none";|

Angular2

HideAndShow()
{
   if(1===1) //If Condition to display message
   {
      let style={    //Other styles can be include after comma
           "display":"",            
      }
      return style;
   }
   else(1!===1)   //Condition to hide message
   {
          let style={    //Other styles can be include after comma
           "display":"none",            
      }
      return style;
   }
}

在视图中

<div [ngStyle]="HideAndShow()"/>

Answer 3

我不熟悉kendo-grid，但是如果你在包含kendo-grid-messages指令时查看生成的html，你会发现它实际上创建了一个包含k-grid-norecords的表行class，包含您的消息。这是你需要设置样式的那一行

尝试将其放入组件的css文件

:host ::ng-deep .k-grid-norecords
{
    background-color:#666;
    height: 500px;
}

See edited plunkr

如何在Angular 2中设置kendo-grid-message的样式

3 个答案: