Kendo UI data grid: How to change column display value based on status flag integer value

Question

In my datasource I have value of status as either 0 or 1. Based on this, in the datagrid I want to display the value of Status as "Active for Status=1" and "Inactive for Status=0". How can I modify the column values accordingly.

Here is the DEMO of my datagrid.

Code:

$(document).ready(function() {

          var myData = [{
            id: 1,
            name: "Grant",
            location: "A",
            color: "green",
            status: 1,
          }, {
            id: 2,
            name: "Vaughan",
            location: "B",
            color: "red",
            status: 0,
          }, {
            id: 3,
            name: "David",
            location: "A",
            color: "orange",
            status: 1,
          }];

          $("#grid").kendoGrid({
            dataSource: {
              data: myData,
              schema: {
                model: {
                  fields: {
                    id: { type: "number" },
                    name: { type: "string" },
                    location: { type: "string" },
                    color: { type: "string" }
                  }
                }
              }
            },
            columns: [
              { field: "id", title: "ID", width: "130px" },
              { field: "name", title: "Name", width: "130px" },
              { field: "location", title: "Location", width: "130px" },
              { field: "color", title: "Color", width: "130px" },
              { field: "status", title: "Status", width: "130px" },
            ]
          });


        });

Answer 1

Use template for conditional column value

{ field: "status", title: "Status", width: "130px", template: "#if(status==1) #  Active # }else{#  Inactive  #}#"}

Working fiddle