title: Kendo UI Grid foreign key mapping not working when loading values via ajax
body: <p>I'm using Angular JS along with Kendo UI (with the <a href="http://kendo-labs.github.io/angular-kendo/" rel="nofollow">Kendo Angular Directives</a>) for a project I'm working on. Currently, I'm loading data into a Kendo UI Grid which contains a foreign key field. I'd like to map this to display user-friendly text rather than a Guid.</p>
  
  <p>So from:</p>
  
  <pre>
  Value          ForeignColumn
  Some Value     [Guid]
  </pre>
  
  <p>To</p>
  
  <pre>
  Value          ForeignColumn
  Some Value     Foreign Value Name
  </pre>
  
  <p>I'd like to load the foreign key values used in the mapping using ajax. If the values are already loaded at the time of initializing the grid, this works just fine (there's an example of this in the JSFiddle below). I've read that Kendo UI doesn't support doing this automatically with ajax, so you have to preload the values before initializing the grid. However, what I'm seeing is that even if I do this, the grid doesn't get updated, even though the data source does reflect the changes based on the loaded values (seen through the batarang extension for Chrome).</p>
  
  <p>I'm doing the following calls to attempt to trigger the refresh:</p>
  
  <pre><code>$scope.myGridOptions.dataSource.read();
  </code></pre>
  
  <p>JSFiddle with comments on different attempts: <a href="http://jsfiddle.net/ernestopye/64nwD/3/" rel="nofollow">http://jsfiddle.net/ernestopye/64nwD/3/</a></p>
  
  <p>I've added comments for some of the different attempts I've made to get this to work. Am I doing something wrong? Or could this be an issue with Kendo UI's Angular directives? I'm fairly new to both Kendo and Angular, so I'm guessing it's probably the former.</p>
  
  <p>Thanks for any help.</p>