You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Get started with the Telerik UI Grid HtmlHelper for {{ site.framework }} and learn how to set up the ForeignKey column."
5
+
slug: foreignkeycolumn_aspnetcore_grid
6
+
position: 9
7
+
---
8
+
9
+
# ForeignKey Column
10
+
11
+
The ForeignKey column functionality of the Telerik UI Grid HtmlHelper for {{ site.framework }} is primarily used for matching the value of a bound property to a desired text field from an external for the grid collection. It follows the convention of the SQL ForeignKey functionality that is used for linking two tables based on a foreign key.
12
+
13
+
The foreign values for the columns of the grid could be supplied in two ways:
14
+
15
+
*[Binding to a local collection](#binding-to-a-local-collection)
16
+
*[Binding to a remote collection](#binding-to-a-remote-collection)
17
+
18
+
## Binding to a Local Collection
19
+
20
+
Binding the column to a local collection of items can be done by passing a valid IEnumerable collection to the ForeignKey column configuration
In order to bind the column to a remote collection of items, supply a URL Action instead of a static collection. It is mandatory to supply the DataValueField and DataTextField options in order to ensure that the column values will be bound to the correct foreign value.
The data source of the values for the foreign key columns. Can be a JavaScript object which represents a valid data source configuration or an existing [kendo.data.DataSource](/api/javascript/data/datasource)
670
+
instance.
671
+
672
+
> **Note:** When the dataSource property is set one should also set the [dataTextField](columns.dataTextField) and [dataValueField](columns.dataValueField).
673
+
674
+
### columns.dataTextField `String`
675
+
676
+
The data text field of the foreign key item.
677
+
678
+
### columns.dataValueField `String`
679
+
680
+
The data value field of the foreign key item.
681
+
667
682
### columns.editable `Function`
668
683
669
684
The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.
description: "Get started with the jQuery Grid by Kendo UI and learn how to set up the ForeignKey column."
5
+
slug: foreignkeycolumn_kendoui_grid_widget
6
+
position: 9
7
+
---
8
+
9
+
# ForeignKey Column
10
+
11
+
The ForeignKey column functionality of the Kendo UI Grid is primarily used for matching the value of a bound property to a desired text field from an external for the grid collection. It follows the convention of the SQL ForeignKey functionality that is used for linking two tables based on a foreign key.
12
+
13
+
The foreign values for the columns of the grid could be supplied in two ways:
14
+
15
+
*[Binding to a local collection](#binding-to-a-local-collection)
16
+
*[Binding to a remote collection](#binding-to-a-remote-collection)
17
+
18
+
## Binding to a Local Collection
19
+
20
+
Binding the column to a local collection of items can be done via the [column.values](/api/javascript/ui/grid/configuration/columns.values) option.
21
+
22
+
```
23
+
<div id="grid"></div>
24
+
<script>
25
+
$("#grid").kendoGrid({
26
+
columns: [
27
+
{ field: "productName" },
28
+
{ field: "category", values: [
29
+
{ text: "Beverages", value: 1 },
30
+
{ text: "Food", value: 2 }
31
+
] }
32
+
],
33
+
dataSource: [
34
+
{ productName: "Tea", category: 1 },
35
+
{ productName: "Ham", category: 2 }
36
+
]
37
+
});
38
+
</script>
39
+
```
40
+
41
+
## Binding to a Remote Collection
42
+
43
+
In order to bind the column to a remote collection of items, supply the [column.dataSource](/api/javascript/ui/grid/configuration/columns.dataSource) option. It is mandatory to supply the [columns.dataValueField](/api/javascript/ui/grid/configuration/columns.dataValueField) and [columns.dataTextField](/api/javascript/ui/grid/configuration/columns.dataTextField) options in order to ensure that the column values will be bound to the correct foreign value.
0 commit comments