MVVM Grid Column Value Lists

How do you make this work?

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
<p>
Could someone please tell me how to bind a columns value lists to a data source in the data model <b>using MVVM</b>?<br>  This example fails, unless you remove ", values: dsStatus" from the end of the status column code.  
</p>
<div id="ui">    
    <div id="grdObjects" data-role="grid" 
         data-height="150" data-selectable="row" data-resizable="true"
         data-columns="[
             { field: 'name', title: 'Name', width: 100 },
             { field: 'status', title: 'Status', width: 70, values: dsStatus }
         ]"
         data-bind="source: dsPeople"></div>
</div>

JavaScript

$(function() {
	var ui = $('#ui');
  var vm = {
		dsPeople: [ 
    	{ name: 'Alex', status: 'A' },
      { name: 'John', status: 'A' },
      { name: 'Zack', status: 'I' }
    ],
    dsStatus: [
    	{ text: 'Active', value: 'A' },
      { text: 'Inactive', value: 'I' }      
    ]
	};

	kendo.bind(ui, vm);
});