columns.values Array
An array of values that will be displayed instead of the bound value. Each item in the array must have a text
and value
fields.
Use the
values
option to display user-friendly text instead of database values.
Example - specify column values
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category", values: [
{ text: "Beverages", value: 1 },
{ text: "Food", value: 2 }
] }
],
dataSource: [
{ productName: "Tea", category: 1 },
{ productName: "Ham", category: 2 }
]
});
</script>
This example displays "Beverages" and "Food" in the "category" column instead of "1" and "2".
Example - specify column values using the MVVM design pattern
<div id="example">
<div data-role="grid"
data-columns="[
{ 'field': 'productName' },
{ 'field': 'category', 'values': [
{ 'text': 'Beverages', 'value': 1 },
{ 'text': 'Food', 'value': 2 }
]}
]"
data-bind="source: products" ></div>
<script>
var viewModel = kendo.observable({
products: [
{ productName: "Tea", category: 1 },
{ productName: "Ham", category: 2 }
]
});
kendo.bind($("#example"), viewModel);
</script>
</div>
Check ForeignKey column for a live demo.