Text Formatting In Kendo UI Grid With Angular

In this blog, we are going to learn how to add formatted text in Kendo Grid using Angular6.

In this blog, we will learn how to add custom data in a specified formatted text in Kendo Grid using Angular 6.

 

There are some descriptions of format sections:

1. Check all in the header. 
2. Anchor Tag in the column.
3. Normal Text.
4. Add Custom Class and Style.
5. Date Format.
6. If else condition in the column.
7. Tooltip.
8. Text box filter outside of grid.

I have an API which returns a bunch of data as JSON. And I have attached API data into my grid with the help of the below code.

this._qService.getList(_officeID).subscribe(
data => {
   this.gridData = data
});

In my UI part, I have a kendo grid.

<kendo-grid [data]="gridData" [pageSize]="state.take"
[skip]="state.skip" [sort]="state.sort" [filter]="state.filter" [sortable]="true" [pageable]="true"
filterable="menu" (dataStateChange)="dataStateChange($event)" [selectable]="{enabled: true, checkboxOnly: true}"
[kendoGridSelectBy]="'ID'" [selectedKeys]="mySelection" (selectedKeysChange)="onSelectedKeysChange($event)">

Now, let us start.

 

Check all in the header.

<kendo-grid-checkbox-column width="40">
   <ng-template kendoGridHeaderTemplate>
      <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox [state]="selectAllState"
      (selectAllChange)="onSelectAllChange($event)" />
      <label *ngIf="!filter" class="k-checkbox-label" for="selectAllCheckboxId"></label>
   </ng-template>
</kendo-grid-checkbox-column>

Anchor Tag in column.

<kendo-grid-column field="Name" title="Applicant Name">
   <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      <a href="customUrl" target="_blank">{{dataItem.Name}}</a>
   </ng-template>
</kendo-grid-column>

If you want to show normal text in column (without any format)

<kendo-grid-column field="Name" title="Name">
</kendo-grid-column>

Add custom style and color code ifrom API:

<kendo-grid-column field="Status" title="Status">
   <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      <span [ngStyle]="{'color': dataItem.StatusColor}"> {{dataItem.Status}} </span>
   </ng-template>
</kendo-grid-column>
with static color:
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
   <a [ngStyle]="{'color': dataItem.Comments? '#009900':'#333'}">{{data form ts file}}</a>
</ng-template>

Date Format

<kendo-grid-column field="Log" title="Date" filter="date" format="{0:d}">
</kendo-grid-column>

If condition inside column

<kendo-grid-column title="Feedback">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<a *ngIf="dataItem.Keyword=='CMP'" href="{{data form ts file}}" target="_blank">Download</a>
</ng-template>
</kendo-grid-column>

If you want to add tooltip on grid then use this code just outside of Kendo Grid

<ng-template #template let-anchor>
   <span>{{ anchor.nativeElement.innerText }}</span>
</ng-template>
<div kendoTooltip
   showOn="none"
   [tooltipTemplate]="template"
   filter=".k-grid td"
   (mouseover)="showTooltip($event)">
   //// your kendo Grid should be here..
</div>

Text box filter outside of grid

<input type="text" [(ngModel)]="filter" (ngModelChange)="onFilterchange()" placeholder="Search any text from Kendo Grid" />

In TS file

private onFilterchange() {
   this.filter = this.filter.toLowerCase();
   this.mySelection = [];
   this.selectAllState = 'unchecked';
   let _gridSource = this.gridSource;
   this.gridData = process(_gridSource.filter(r => r.Name.toLowerCase().includes(this.filter) || r.Subject.includes(this.filter) || r.LastName.toLowerCase().includes(this.filter) || r.FistName.toLowerCase().includes(this.filter) || r.ContactEmail.toLowerCase().includes(this.filter) || r.ContactNumber.includes(this.filter) || r.MiddleName.toLowerCase().includes(this.filter)), this.state);
//}
}