Consider a dataset containing user records where the status is represented by an integer identifier:

var userRecords = [
    { userId: 101, fullName: "Alice Johnson", accountState: 1 },
    { userId: 102, fullName: "Bob Smith", accountState: 2 }
];

In this scenario, the accountState field uses 1 to denote "Active" and 2 to denote "Locked". A standard Kendo Grid configuration might look like this:

columns: [
    { field: "userId", title: "ID" },
    { field: "fullName", title: "Full Name" },
    { field: "accountState", title: "Current Status" }
]

By default, the grid renders the raw numeric values. To display the corresponding text labels, developers often resort to using inline templates with conditional logic:

columns: [
    { field: "userId", title: "ID" },
    { field: "fullName", title: "Full Name" },
    {
        field: "accountState",
        title: "Current Status",
        template: "# if (accountState == 1) { # Active # } else { # Locked # } #"
    }
]

While functional, this approach lacks scalability. Adding new states requires modifying the template logic, leading to cluttered and hard-to-maintain code. A more robust solution involves utilizing the values property provided by the Kendo Grid column definition.

First, define an array of objects that maps the integer values to their string representations:

var statusDefinitions = [
    { text: "Active", value: 1 },
    { text: "Locked", value: 2 }
];

Next, assign this array to the values property within the column configuration:

columns: [
    { field: "userId", title: "ID" },
    { field: "fullName", title: "Full Name" },
    {
        field: "accountState",
        title: "Current Status",
        values: statusDefinitions
    }
]

This configuration automatically handles the mapping, ensuring that the grid displays "Active" or "Locked" based on the underlying data value without manual template logic.