Kendo UI Grid Text Formatting Using Angular

This article will teach you how to use Angular 6 to add custom data to a Kendo Grid structured text field.

The following are some format section descriptions:

1. Verify everything in the header.
2. In the column, use an anchor tag.
3. Standard Text.
4. Customize the class and style.
5. Date Style.
6. Condition in the column if, else
7. Tooltip.
8. text box filter for non-grid fields.

A lot of data are returned as JSON by an API I have. Additionally, I used the code below to tie API data to my grid.

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

I have a kendo grid in my user interface.

<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)">

Let’s get started now.

Verify everything 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>

Tag Anchor 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’d like to display standard text in a column (without any format)

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

Add a unique style and colour scheme using the 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 clause 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>

Use this code immediately outside of Kendo Grid to add a tooltip to the 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>

Filtering text boxes outside of grids

<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);  
//}  
}