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.