Foreign Key with Column Template

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

    Posted 07 Sep Link to this post

    I have a Kendo UI Grid in Angular that includes several foreign keys.  For the most part, the columns' displays can be handled using the 'values' property for the column.  However, I have a column in which I want to display both text and a font awesome image based on the foreign key ID.  I assume this will need a template, but do not know what to enter in the template.  For this column, I want something similar to the following:

    $ctrl.columns = [{
        field: 'typeId',
        title: 'Type',
        values: $ctrl.types,
        editor: typeComboboxEditor,
        template:
            '<div>' +
                '<i class={{dataItem.typeId.image}} aria-hidden="true"></i>' +
                '<br/>{{dataItem.typeId.text}}' +
            '</div>'
    }, {
        field: 'text',
        title: 'Item',
        width: '500px'
    },
    // etc.
    {
        command: [
            { name: "edit", text: "" },
            { name: "destroy", text: "" }
        ]
    }];

    Obviously, dataItem.typeId is not what I need to use to get to the image and text, but I do not know what to put here.  For a different column, I created a component and passed in the entire dataItem, but that seems overkill for this.  

    Is there a simpler way to reach two fields of the parent table when using a foreign key?

    Thanks!

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 Sep Link to this post

    Hello,

    You can accomplish your goal using the column template. As most probably the selected text is not present in the grid model, you will need to retrieve it manually from the column values collection. Here is a demo that demonstrate one possible way to accomplish this task:

    http://dojo.telerik.com/OpULa

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    1 posts
    Member since:
    Oct 2016

    Posted 17 Oct in reply to Georgi Krustev Link to this post

    It would be nice if we could specify something like a valueTemplate in the column definition, or if we could access the referenced text string in the column template, something like this where #= value # is the foreign key text:

    { "field": 'AccountId', "title": 'Account', "width": 100, "values": $scope.accountsDataSource.data().toJSON(), "template": '<div class="acct-cust-cell">#= value #</div>' }
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 19 Oct Link to this post

    Hello Matt,

    Thank you for the suggestion. I will forward it to our dev team for further consideration.

    For now the best way to take control over the foreign key column editor is to use a custom editor template. There you can initialize the widget in the desired way:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/editing#foreign-key-columns

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready