I have a Kendo Grid in Angular, the Grid has some Detailgrid and within I have a GridCellTemplate. I want to add a css class to the ng-template to colorize based on value. But I cannot add.
I tried to add this line to it but giving me an error (working if I add another div inside the ng-template):
class="{{getClass(dataItem,column)}}"
This is my ng-template Code
<kendo-grid-column
field="{{column}}" >
<ng-template kendoGridCellTemplate let-dataItem class="{{getClass(dataItem,column)}}">
value
</ng-template>
</kendo-grid-column>
Related
How to customize cell template for week view? We have necessity of show a popover on segment time clicked (there are more check about this), and i want change the template of [hourSegmentTemplate].
Can you send an example?
Thank you
Edit:
I use this component.
I want to change the default week view, thanks [hourSegmentTemplate] attribute:
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate"
[hourSegmentTemplate]="weekView"
[events]="events"
[refresh]="refresh">
</mwl-calendar-week-view>
<ng-template #weekView let-segment="segment" let-locale="locale">
<div
class="cal-hour-segment"
[class.cal-hour-start]="segment.isStart"
[class.cal-after-hour-start]="!segment.isStart"
[ngClass]="segment.cssClass">
<span class="cal-time">
{{ segment.date | calendarDate:'dayViewHour':locale }}
</span>
This is some custom content
</div>
But the result is
this
I want only the hours on the left, and the possibility to manage a single template's cell.
If you using ng-template, you have access to a context variable isTimeLabel which has a boolean value which describes where the time label is.
This is a solution for your example:
<ng-template #weekView let-segment="segment" let-locale="locale" let-isTimeLabel="isTimeLabel">
<div *ngIf="isTimeLabel">
</div>
</ng-template>
Desired behavior: Kendo grid has column for "isActive?" which is populated by a green fas-fa-clock icon if isActive == true and by grey far-fa-clock if false. The icon has an onClick to toggle between t/f.
Current behavior: Grid exists and populates the field with the word true or false.
code:
component.html
<kendo-grid [data]="gridView" [sortable]="{ allowUnsort: true, mode: 'single' }" [sort]="sort"
(sortChange)="sortChange($event)" [height]="auto">
<kendo-grid-column field="someItems" title="items" width=7>
</kendo-grid-column>
<kendo-grid-column field="isActive" title="A?" width="4" spriteCssClass="fa fa-flag-checkered">
</kendo-grid-column>
<kendo-grid-column field="moreItems" title="items" width="4">
</kendo-grid-column>
</kendo-grid>
The spriteCssClass does nothing. I'm not sure how to get this to do this correctly.
It's also all created in html - a convention which none of the stuff I've read has seemed to support.
Resources:
https://fontawesome.com/icons/clock?style=solid
https://docs.telerik.com/kendo-ui/controls/navigation/menu/how-to/using-fontawesome-icons
https://docs.telerik.com/kendo-ui/controls/hybrid/styles/icons
https://www.telerik.com/forums/adding-images-to-a-column-in-kendo-grid
App is Angular/ts
Anybody know the correct syntax for this?
All linked Kendo UI resources are for Kendo UI for jQuery while the question seems to be about Kendo UI for Angular?
As already suggested, check out the cell templates example, you will also need to load the FontAwesome CSS:
<kendo-grid-column field="Discontinued">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<i class="fa fa-flag-checkered" [style.color]="dataItem.Discontinued ? 'grey': 'green'" aria-hidden="true" (click)="dataItem.Discontinued = !dataItem.Discontinued"></i>
</ng-template>
</kendo-grid-column>
EXAMPLE
I am using primeng TurboTable where for templates a pTemplate directive is added. And then accordingly DOM gets rendered I am trying to implement a very same approach in my project to create a reusable(DUMB) component. Tried searching for a solution but couldn't find a proper solution. Thought about using ng-container but when passing ng-template from Smart component to child component nothing is happening. PFB a sample of the solution I tried
Smart Component Template
<dumb-component>
<ng-template #content> Content is placed here .... </ng-template>
</dumb-component>
Dumb Component Template
<ng-container *ngTemplateOutlet="content">
</ng-container>
Link to primeng documentation : primeng docs
Since your component Dumb Component receives a template. It needs to access the template with #ContentChild
Dump Component
<ng-container *ngTemplateOutlet="content">
</ng-container>
#ContentChild(TemplateRef) content: TemplateRef<any>;
Example:https://stackblitz.com/edit/angular-ephusu
I'm trying to clone the ng-content items of a component along with any functionality added on the HTML of that content. For example, the markup using the component might look like this:
<custom-component>
<button (click)="doAThing();">A button</button>
</custom-component>
Then I set up my template for custom-component like so:
<ng-template #content>
<ng-conent></ng-content>
</ng-template>
<ng-template *ngTemplateOutlet="content"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="content"></ng-template>
</div>
My expectation would be that the ng-content would get duplicated into both ngTemplateOutlet areas. What happens is that it pushes to the last outlet and ignores the first. This markup will duplicate normal markup just fine, but ng-content only move to one outlet.
Is this not possible with this technique, am I missing something obvious, or it there another way to clone the contents of ng-content along with any events attached to it?
I found this solution that worked for me. First the HTML, you'll need a directive to wrap the content in so you can reference it. You'll need to use asterisk with directive so it can be duplicated.
<custom-component>
<ng-container *customDirective>
<button (click)="doAThing();">A button</button>
</ng-container>
</custom-component>
The directive doesn't require any extra code. We just need it for a reference.
In your custom-component, you'll need to create a reference to the diretive via #ContentChild like so:
#ContentChild(CustomDirective, { read: TemplateRef }) transcludeTemplate;
Then we use the following for our custom-component HTML avoiding using ng-content tags all together:
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
<div class="second-area>
<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
</div>
So this isn't really the same as duplicating <ng-content>, but it gives us a similar function. Apparently ng-content not multiplying is intended behavior. So this might be the best way to achieve a similar goal.
I need to add custom icons on either side of the treeview node in Kendo treeview in angular 5. I came across iconClass to add icons but could not get the syntax to add custom icons. Need a way to achieve this
You need to set the node template in order to achieve that level of customization.
Check out in the related page how component is initialized with a ng-template directive:
#Component({
selector: 'my-app',
template: `
<kendo-treeview
[nodes]="data"
textField="text"
kendoTreeViewExpandable
kendoTreeViewHierarchyBinding
childrenField="items"
>
<ng-template kendoTreeViewNodeTemplate let-dataItem>
<span [ngClass]="iconClass(dataItem)"></span>
{{dataItem.text}}
</ng-template>
</kendo-treeview>
`
})