Custom styling for Kendo Angular2 grid columns

9 posts, 2 answers
  1. Phanindra
    Phanindra avatar
    5 posts
    Member since:
    Feb 2017

    Posted 10 Mar 2017 Link to this post

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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 14 Mar 2017 Link to this post

    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.
  3. Phanindra
    Phanindra avatar
    5 posts
    Member since:
    Feb 2017

    Posted 15 Mar 2017 in reply to Dimiter Topalov Link to this post

    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.
  4. Phanindra
    Phanindra avatar
    5 posts
    Member since:
    Feb 2017

    Posted 15 Mar 2017 in reply to Phanindra Link to this post

    I have created a plnkr for your reference. 

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

     

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 17 Mar 2017 Link to this post

    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.
  6. Phanindra
    Phanindra avatar
    5 posts
    Member since:
    Feb 2017

    Posted 23 Mar 2017 in reply to Dimiter Topalov Link to this post

    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

     

  7. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 27 Mar 2017 Link to this post

    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.
  8. Phanindra
    Phanindra avatar
    5 posts
    Member since:
    Feb 2017

    Posted 28 Mar 2017 in reply to Dimiter Topalov Link to this post

    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.
  9. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 30 Mar 2017 Link to this post

    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.
Back to Top