This is a migrated thread and some comments may be shown as answers.

Custom styling for Kendo Angular2 grid columns

8 Answers 1273 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phanindra
Top achievements
Rank 1
Phanindra asked on 10 Mar 2017, 04:32 PM

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

8 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 14 Mar 2017, 11:00 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Phanindra
Top achievements
Rank 1
answered on 15 Mar 2017, 02:52 PM
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.
0
Phanindra
Top achievements
Rank 1
answered on 15 Mar 2017, 03:57 PM

I have created a plnkr for your reference. 

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

 

0
Dimiter Topalov
Telerik team
answered on 17 Mar 2017, 08:05 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Phanindra
Top achievements
Rank 1
answered on 23 Mar 2017, 09:46 PM

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

 

0
Accepted
Dimiter Topalov
Telerik team
answered on 27 Mar 2017, 10:56 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Phanindra
Top achievements
Rank 1
answered on 28 Mar 2017, 01:54 PM
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.
0
Accepted
Dimiter Topalov
Telerik team
answered on 30 Mar 2017, 09:19 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Phanindra
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Phanindra
Top achievements
Rank 1
Share this question
or