Как стилизовать kendo-grid-message в Angular 2
когда нет доступных для отображения записей, должно отображаться пользовательское сообщение в сетке, сообщение отображается с помощью 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. URL: https://www.telerik.com/kendo-angular-ui/components/grid/styling/#toc-customizing-column-styles Спасибо
да, я тоже пробовал с [ngStyle], но в консоли не отображается ошибка и стили не применяются
Ответы 3
Создайте условный элемент.
<div *ngIf = "noRecords"> message </div>
Попробуйте использовать смешанный стиль и 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";|
Угловой2
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()"/>
OP использует angular2
Я не знаком с кендо-сеткой, но если вы посмотрите на результирующий html при включении директивы kendo-grid-messages, вы увидите, что он фактически создает строку таблицы с классом k-grid-norecords, которая содержит ваше сообщение. Это строка, которую вам нужно стилизовать
Попробуйте поместить это в файл css вашего компонента
:host ::ng-deep .k-grid-norecords
{
background-color:#666;
height: 500px;
}
привет, как думаешь, сможешь ответить на этот вопрос? спасибо stackoverflow.com/questions/62464601/…
Попробуйте [ngStyle] вместо [style]