I'm using Angular JS along with Kendo UI (with the Kendo Angular Directives) 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.
So from:
Value ForeignColumn Some Value [Guid]
To
Value ForeignColumn Some Value Foreign Value Name
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).
I'm doing the following calls to attempt to trigger the refresh:
$scope.myGridOptions.dataSource.read();
JSFiddle with comments on different attempts: http://jsfiddle.net/ernestopye/64nwD/3/
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.
Thanks for any help.
Mihai Bazon provided a solution through a GitHub issue. There's an undocumented attribute called k-ng-delay which helps facilitate this exact scenario. He's working on adding it to the docs, and provided an example.
<div id="grid" kendo-grid k-ng-delay="gridOpts" k-options="gridOpts"></div>
I forked my JSFiddle example and updated it to use k-ng-delay: http://jsfiddle.net/ernestopye/ceKXg/2/
Hope this helps someone!