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

Foreign key column and styling

3 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 04 Nov 2016, 04:45 PM

I have a grid with a 'type' column.  The dataSource gives me the typeId which relates to data in another array.  Based on the type, I want to display a font-awesome image along with the type name.  I have the font-awesome class as a property of the object in the array.  Now, obviously, I can use the text and value properties in the array of type objects to set the label, but how can I add the third property of the classes?  

I currently have it hard-coded in the template as follows:

<div ng-if="dataItem.typeId == 0" class="text-center">
    <i class="fa fa-map-pin fa-2x red" aria-hidden="true"></i>
    <div class="bold">Reminder</div>
</div>
<div ng-if="dataItem.typeId == 1" class="text-center">
    <i class="fa fa-exclamation-circle fa-2x red" aria-hidden="true"></i>
    <div class="bold">Alert</div>
</div>
<div ....

However, that requires hard-coding the data values into the template instead of using what comes across in the data.  Is there a way to do something like this where type would be some kind of reference to the array of types?

<div ng-bind="dataItem.typeId" class="text-center">
    <i class="{{type.image}}" aria-hidden="true"></i>
    <div class="bold">{{type.text}}</div>
</div>

Thanks!

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Nov 2016, 09:45 AM
Hello Christy,

The desired result can be achieved using the columns.template property and set it as a function. Inside the template based on the typeID select the correct item in the array and store its value in a new variable, then use this variable inside the template: 

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

I made a Dojo example demonstrating this implementation:

http://dojo.telerik.com/aNEvA

I hope this is helpful.

Regards,
Stefan
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Christy
Top achievements
Rank 1
answered on 08 Nov 2016, 05:06 PM

Thanks!  That really helped a lot.  In my current code, I am assigning the lookup objects myself, so the following works perfectly.  

<div class="text-center">
    <i ng-class="[vm.types[dataItem.typeId].image]" aria-hidden="true"></i>
    <div class="bold">{{vm.types[dataItem.typeId].text}}</div>
</div>

However, if I have data from a database where the id's may not be sequential, is there a way to match the typeId to the types.values easily without a lot of JavaScript?  I want something that won't have to rerender a bunch of times and cause the grid to load to slowly.

0
Stefan
Telerik team
answered on 10 Nov 2016, 11:37 AM
Hello Christy,

Unfortunately, there is no out of the box method that can do this type of mapping between the items in the database and the items in the array.

I can suggest using a custom approach, to add a property to the objects into the array, so then instead of using sequential numbers, the items can be mapped by the Id.

This can be achieved by using the schema.parse property of the DataSource to set the id to the objects in the array. Then in the template map the objects using the id and the dataItem ID:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

I made a Dojo demonstrating this implementation:

http://dojo.telerik.com/AqEBI

Regards,
Stefan
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Grid
Asked by
Christy
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Christy
Top achievements
Rank 1
Share this question
or