Foreign key column and styling

4 posts, 0 answers
  1. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 04 Nov Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 08 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 08 Nov in reply to Stefan Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    276 posts

    Posted 10 Nov Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready