kendo grid template js with remote datasource

Question

I got a table with remote datasource. in one cell I got the userID. Because I want to show the username instead of the user ID I made a custom template function:

function getUserName(pmcreator){
    var user = '';
    var data = ''
    ds_userList.fetch(function(){
        var data = this.data();
        for(var i = 0, length = data.length; i < length; i++){
            if(data[i].uID == pmcreator){
                console.log(data[i].uLastname)
                user = data[i].uLastname
            }
        }
    });
    return user
}

But its not working as it should, the cells stay empty. I got no errors but I see that the remote request to fetch the usernames is not completed before the grid is filled out. I thought the custom function of fetch is waiting for the results to return but it don't seems so.

Any Idea? I find thousends of examples but all with static local data. I need one with both remote, the grid conent and the template data.

Answer 1

This is probably due the fact that when yuo call the dataSource.fetch it fires off an async function, which causes the thread running the template to continue on. According to kendo you will need to return a control, then set the content of that control inside the callback.

Quick sample using Northwind categories... Here is the template function

function getDetails(e) {
 $.getJSON("http://services.odata.org/V3/Northwind/Northwind.svc/Categories", null, function(data) {
    var category = data.value.filter(function(item, i) {
      return item.CategoryID === e.CategoryID;
    });
    $("#async_" + e.CategoryID).html(category[0].Description);
  });

   return "<div id='async_" + e.CategoryID + "'></div>";
}

http://jsbin.com/ODENUBe/2/edit

I kept getting a recursive error maximum call stack when I just tried to fetch the dataSource, so I switched to a simple getJSON, but it should work pretty much the same.