Custom styling for Kendo Angular2 grid columns

[Phanindra]

I am trying to build grids using Kendo - Angular2. I am generating the grid completely dynamically from the Json data. I want to apply styling to few columns based on the column name. By using the below code, I am able to generate the grid, but couldn't able to apply styling to few columns based on the column name. 

 

<kendo-grid [kendoGridBinding]="gridData" [pageSize]="10" [pageable]="true" [sortable]="true" [groupable]="true" [height]="370">
<kendo-grid-column *ngFor="let col of columns" field="{{col.Name}}" title="col.Name" [sortable]="true">
</kendo-grid-column>
</kendo-grid>

 

My Json structure. 

 

{
    "Id": "ALFKI",
    "CompanyName": "Alfreds Futterkiste",
    "ContactName": "Maria Anders",
    "ContactTitle": "Sales Representative",
    "Address": "Obere Str. 57",
    "City": "Berlin",
    "PostalCode": "12209",
    "Country": "Germany",
    "Phone": "030-0074321",
    "Fax": "030-0076545"
}

[Dimiter Topalov]

Hi Phanindra,

You can use the ColumnComponent class input to set a custom class for the respective column, e.g.:

http://plnkr.co/edit/N0t5QYvOuWKzpagm7mB6?p=preview

The footerClass and headerClass inputs can be used to add classes to the header and footer cells respectively, if needed.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Phanindra]

Here I am generating the columns dynamically. For one particular column " Contact Name", I want to apply styling. I already saw the example that you have shared. It has static columns. In my case if you see the above code, the columns are dynamic using *ngFor. In this case, I want one column to have a different styling applied.

[Phanindra]

I have created a plnkr for your reference. 

http://plnkr.co/edit/X6CwdJqwtL7mu4x4z2k0?p=preview

 

[Dimiter Topalov]

Hello Phanindra,

Thank you for the runnable sample.

The example, provided in my initial response also uses ngFor for generating the columns, but the syntax is different:

<template ngFor [ngForOf]="columns" let-column>
            <kendo-grid-column
              [class]="column === 'CompanyName' ? 'custom':''"
              field="{{column}}"
              *ngIf="hiddenColumns.indexOf(column) === -1"
            >...

The columns in your example are generated automatically by the Grid, based on the data it is bound to (a column is generated for each field).

http://plnkr.co/edit/67dc0iyx5yT5f3jFpItH?p=preview

Unfortunately there is no viable way for configuring column settings after the Grid is created and rendered, so the possible options are either to define the column options for all columns that will be displayed in the grid, like described in the following section of our documentation:

http://www.telerik.com/kendo-angular-ui/components/grid/columns/#toc-columns

... or define an array that will keep the columns in the component class, populate it dynamically as the data arrives (or once, if the column definitions will not be changed later), and use *ngFor to create the columns and set the respective options in the markup, e.g.:

http://plnkr.co/edit/67dc0iyx5yT5f3jFpItH?p=preview

Regards,
Dimiter Topalov
Telerik by Progress

[Phanindra]

Hi Dimiter,

With this dynamic loading of grid, I am able to provide styles to couple of columns in the grid. Please have a look at my updated plnkr.

http://plnkr.co/edit/X6CwdJqwtL7mu4x4z2k0?p=preview

But what I am actually looking is, 

i) map the values to icons for a particular column

ii) map the values to a progress bar for another column.

Please have a look at the attached snapshot

 

[Dimiter Topalov]

Hello Phanindra,

You can use a Kendo UI for Angular Slider 

http://plnkr.co/edit/ODs488mQs827Xq8thQER?p=preview

... or a regular input type range:

http://plnkr.co/edit/6aBY0XoeBQVVSH9ECANO?p=preview

... and bind its value property to the respective data item field.

A similar approach can be used to conditionally add different styles and/or classes to a column template's element(s). Further information about binding to styles and/or classes is available in the Angular documentation:

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings

Regards,
Dimiter Topalov
Telerik by Progress

[Phanindra]

I think this covered my second scenario but I am looking for first scenario where I want to map the values to icons and display them.

[Dimiter Topalov]

Hello Phanindra,

You can use *ngIf along with Angular class or style bindings to display an icon in a column template. The icon can be coming from a class or style, added based on some property of the data item, and can be displayed conditionally, based on other property, e.g.:

http://plnkr.co/edit/ODs488mQs827Xq8thQER?p=preview

For a list of Kendo UI classes and their corresponding font icons, as well as a guide for inserting font icons, please check out the following section of our documentation:

http://www.telerik.com/kendo-angular-ui/components/styling/icons/

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress