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

Foreign Key with Column Template

13 Answers 550 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 07 Sep 2016, 04:13 PM

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!

13 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 10 Sep 2016, 06:32 AM
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.
 
0
Ody
Top achievements
Rank 1
Veteran
answered on 17 Oct 2016, 10:16 PM

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>' }
0
Georgi Krustev
Telerik team
answered on 19 Oct 2016, 08:21 AM
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.
 
0
Chris
Top achievements
Rank 1
answered on 19 Apr 2017, 03:18 PM

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?

0
Konstantin Dikov
Telerik team
answered on 21 Apr 2017, 09:31 AM
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.
0
Chris
Top achievements
Rank 1
answered on 24 Apr 2017, 09:00 AM

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

0
Konstantin Dikov
Telerik team
answered on 26 Apr 2017, 07:25 AM
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.
0
Chris
Top achievements
Rank 1
answered on 26 Apr 2017, 08:07 AM

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

0
Konstantin Dikov
Telerik team
answered on 28 Apr 2017, 06:27 AM
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.
0
Chris
Top achievements
Rank 1
answered on 28 Apr 2017, 07:29 AM
Thanks, that's exactly what I'm doing, but I dislike this approach as the code and data is all over the place.
0
Donny
Top achievements
Rank 1
answered on 24 May 2019, 06:12 AM

I'm trying to follow this thread but having a hard time.

 

[quote]The values collection of the ForeignKey column will contain only the Text and Value fields...[/quote]

 

If I want to pass the foreign column text field "CategoryName" to a JS function... can I do something similar to the following?

 

columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
.Title("Category").Width(200).ClientTemplate("#=JSFunction(CategoryName)#")

 

<script>

     

</script>

0
Donny
Top achievements
Rank 1
answered on 24 May 2019, 06:19 AM

Sorry, my question posted before I finished...

 

<script>

function JSFunction (value) {

if (value == "ABC") {

return "<div class='class1'>" + value + "</div>";

}

else {
return "<div class='class2'>" + value + "</div>";
}

}

</script>

 

I can't seem to figure out how to get this to work.

0
Donny
Top achievements
Rank 1
answered on 24 May 2019, 06:08 PM

Following up, I was able to use the information in the following forum post to create a solution.

https://www.telerik.com/forums/client-template-(hyper-link)-on-foreign-key-column

Tags
Grid
Asked by
Christy
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Ody
Top achievements
Rank 1
Veteran
Chris
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Donny
Top achievements
Rank 1
Share this question
or