How to style kendo-grid-message in Angular 2

Question

when there are no records are available to display it should show a custom message in the grid, the message is getting displayed with kendo-grid-message but I'm not able to change its styles

Code:

<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 Reference: I'm using the following example for styling of Kendo Grid. URL: https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles Thanks

Answer 1

Create an conditional element.

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

Answer 2

Try to use mixed style and 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;
   }
}

In View

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

Answer 3

I am not familiar with kendo-grid, but if you look at the resulting html when including the kendo-grid-messages directive, you'll see that it actually creates a table row with the k-grid-norecords class, which contains your message. This is this row that you need to style

Try putting that in your component's css file

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

See edited plunkr