The same approach is not applicable for the MVC wrapper due to the way how MVC wrappers are being configured. There is no way to configure a calculated column in the DataSource configuration with the razor.
A possible workaround would be to have a custom column (hidden in the UI) that holds the text for each Category (the foreign key itself is bound to the integer column). When user tries to sort the foreign key you can explicitly sort the DataSouce by the hidden column. Please refer to the code snippets below:
columns.Bound(p => p.CategoryName).Hidden();
columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData[
.Events(ev => ev.Save(
// this code finds what is the text value associated with the selected CategoryID (number)and sets the hidden column to this text
.columns.values[e.values.CategoryID - 1].text);
//since the sorting is disabled for this column you can bind to the click of the header and perform custom sorting by the hidden column
Please note that such scenario is not officially supported and some custom logic should be implemented. In the example above it is shown some sample code that does not include validation logic and etc.
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI