Как оформить кендо-грид-сообщение в Angular 2

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>

Плункер: https://plnkr.co/edit/iGLJ06zRVYWDYedAtsDW?p=preview Справка: я использую следующий пример для стилизации Kendo Grid. URL: https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles Спасибо

Answer 1

Попробуйте использовать смешанный стиль и стиль ngstyle.

<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 2

Я не знаком с kendo-grid, но если вы посмотрите на полученный html при включении директивы kendo-grid-messages, вы увидите, что он фактически создает строку таблицы с классом k-grid-norecords, который содержит ваше сообщение , Это тот ряд, который вам нужен для стиля

Попробуйте вставить это в файл CSS вашего компонента

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

См. Отредактированный планер

Answer 3

Создать условный элемент.

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