Store calculated data in Column of Kendo Grid

Question

What I'm trying to do is store some data in a specific column that is calculated by using the data from another column.

I currently have a function that returns the number of available licenses for the given Id in JSON

function getAvailableLicenses(id) {
    var url = "/Host/Organization/AvailableLicenses/" + id;
    $.get(url, function (data) {
        return data.AvailableLicenses;
    });
}

How do I go about storing this number in a column named "AvailableLicenses"?

Here is my current Grid:

$("#OrganizationGrid").kendoGrid({
dataSource: viewModel.get("orgDataSource"),
filterable: {
    extra: false
},
sortable: true,
pageable: true,
columns: [
    { field: "Id", hidden: true },
    { field: "Name", template: "<a href='/Host/Organization/Detail/#:Id#'>#:Name#</a>" },
    { field: "LicenseNumber", title: "Number of Licenses" },
    { field: null, title: "Available Licenses", template: "#= getAvailableLicenses(Id) #" },
    { field: "LicenseExpiration", title: "License Expiration", format: "{0:MM/dd/yyyy}" },
    { field: "State" },
    { field: "Active" }
],
editable: false
});

As you can see, I tried to create a null column with a template that calls the function for the given Id . By using Fiddler I can see that the function is indeed being called for all of the rows, but the AvailableLicenses column just displays Undefined for every row.

Is there something I'm missing here to get this to work?

Answer 1

I think the better way to do this is on dataSource parse() function

First: you column configuration must change like this:

 { field: "AvalableLicenses", title: "Available Licenses" },

You alaways can use you template .

And second, inside your dataSource() you can add:

schema: {
    parse: function(response) {
      for (var i = 0; i < response.length; i++) {
       response[i].AvalableLicenses= null;
       response[i].AvalableLicenses = getAvailableLicenses(response[i].Id)
      }
      return response;
    }
  }

EDIT:

If you prefer using you way, I dont see any problem in your configuration, probably your $.get is returning undefined, or something you don't expect. For conviniance I did an example working.

http://jsfiddle.net/jwocf897/

Hope this help