Foreign Key with Column Template

[Christy]

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!

[Georgi Krustev]

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

 

 

[Ody]

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>' }

[Georgi Krustev]

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

 

 

[Chris]

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?

[Konstantin Dikov]

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

[Chris]

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

[Konstantin Dikov]

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

[Chris]

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

[Konstantin Dikov]

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:

• http://stackoverflow.com/questions/5863094/asp-net-mvc-using-viewdata-in-javascript

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

[Chris]

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

[Donny]

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>

[Donny]

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.

[Donny]

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