Foreign Key with Column Template

11 posts, 0 answers
  1. Christy
    Christy avatar
    47 posts
    Member since:
    May 2016

    Posted 07 Sep 2016 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
    3720 posts

    Posted 10 Sep 2016 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. Ody
    Ody avatar
    5 posts
    Member since:
    Oct 2016

    Posted 17 Oct 2016 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>' }
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3720 posts

    Posted 19 Oct 2016 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.
     
  5. Chris
    Chris avatar
    7 posts
    Member since:
    Apr 2017

    Posted 19 Apr in reply to Georgi Krustev Link to this post

    How could this be achieved for the asp.net mvc fluent GridBuilder where the foreign key data is not accessible client-side?

    e.g.

    columns.ForeignKey(o => o.ForeignKeyId, Model.MyForeignKeyObjects, "Id", "Name")

    Short of me spitting out my own JavaScript array from Model.MyForeignKeyObjects?

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2047 posts

    Posted 21 Apr Link to this post

    Hi Chris,

    You could access the data from the ForeignKey column through the values collection on client-side. The code would be something like the following:
    $("#gridid").data("kendoGrid").columns[3].values -> you just need to change the index to match the index of the foreign key column in your grid

    Hope this helps.


    Regards,
    Konstantin Dikov
    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.
  7. Chris
    Chris avatar
    7 posts
    Member since:
    Apr 2017

    Posted 24 Apr in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    Whilst this is helpful, it doesn't solve the problem of wanting to use a field in the template that isn't one of the text or value fields.

    Thanks

    Chris

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2047 posts

    Posted 26 Apr Link to this post

    Hi Chris,

    You could display any field from the model in the ClientTemplate of any column with the following syntax:
    columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
    .Title("Category").Width(200).ClientTemplate("#=YourOtherFieldName#")

    If you have something different in mind, please elaborate on the exact requirement.


    Regards,
    Konstantin Dikov
    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.
  9. Chris
    Chris avatar
    7 posts
    Member since:
    Apr 2017

    Posted 26 Apr in reply to Konstantin Dikov Link to this post

    Hi Konstantin

    I want to display a field from the *foreign key* model, not from the primary model. What you have described doesn't work for properties on the child model.

    Thanks

    Chris

  10. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2047 posts

    Posted 28 Apr Link to this post

    Hello Chris,

    The values collection of the ForeignKey column will contain only the Text and Value fields and if you want to access another field from the foreign key model you should use another approach for passing that collection on client side. You could refer to the following forum thread for passing value from ViewData to JavaScript variable:
    Once you pass the foreign key data you could use the value from the Grid's model to find the matching data item in the foreign key collection: .ClientTemplate("#=getMatchingValue(gridValueFieldName)#")


    Best Regards,
    Konstantin Dikov
    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.
  11. Chris
    Chris avatar
    7 posts
    Member since:
    Apr 2017

    Posted 28 Apr in reply to Konstantin Dikov Link to this post

    Thanks, that's exactly what I'm doing, but I dislike this approach as the code and data is all over the place.
Back to Top