[Solved] Foreign key column and styling

[Christy]

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!

[Stefan]

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

 

 

[Christy]

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.

[Stefan]

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