Would it be a good approach to never return a MVC viewModel to my UI and always use client side Web API calls to retrieve all data?
I would say it depends on your use case.
You could certainly return data that needs to be rendered the moment the page is displayed in the MVC Model. Remember that the MVC Model is rendered into the resulting HTML page on the server. This means that the values can be injected right into the HTML before it is returned to the client.
Also keep in mind that it could take overall longer to render your page completely if you have to hit the server multiple times; once to fetch the HTML then once for each Kendo widget to fetch data async.
That said, I usually end up doing what you said... Just render an MVC view with no Model, then have the Kendo UI widgets fetch their data after page load.
But really, it sort of depends on your data. If you have an MVC Model that contains:
public string Title { get; set; }
And in Razor you had:
<h1>@Title</h1>
Then that isn't really a case where I would want to re-fetch that data async. In those cases I usually do something sort of hacky, and put the value into the page:
<script type="text/javascript">
window.viewData = window.viewData || {};
window.viewData.Title = "@Title"
</script>
<h1 data-bind="text: Title"></h1>
<script src="viewmodel.js"></script>
Then in the viewmodel.js file (which I make a separate file from the returned HTML so that it can be cached by the browser)
(function (viewData) {
var viewModel = kendo.observable({
Title: viewData.Title
});
kendo.bind($("body"), viewModel);
})(window.viewData);
This is just my own approach though. It isn't necessarily the best for all situations. It all just depends what data you are pulling from where and how much.