MVC server wrappers and RequireJs

[Pete Smith]

Hi,

We've been using the Telerik MVC UI extensions and have just purchased the Kendo UI Complete for MVC and are working on upgrading our project templates to use Kendo. Part of this upgrade process has been looking at ways to reduce bandwidth consumption. Currently our pages are returning about 4MB of scripts and most of those scripts are not used on the majority of the pages. Which lead us to looking at RequireJS so we can load only the scripts that the page needs. This will reduce the scripts requested from 4MB+ to around an average of 300KB and Kendo UI does support RequireJS. But, that would require us to code all the Kendo widgets in javascript and not use the MVC server wrappers, which is a big reason for us to use Kendo in the first place.  

So, I started looking at the Kendo.Mvc source code and found that it's relatively trival to add the ability to wrap the rendered javascript in the appropriate requireJs code. I implemented a basic version, similar to how the Deferred Scripts are handled, and it was only about 50 lines of code.  

I generally don't like modifying third party code as when updates occur, I have to re-apply my modifications.

So, my question is:
Is adding requireJS support to the server wrappers something that is being worked on? And if so, is there an ETA?

[Atanas Korchev]

Hi Peter,

You can use RequireJS with the Kendo UI ASP.NET MVC Wrappers by utilizing deferred initialization.

Here are the required steps:

1. Include RequireJS and set the data-main attribute to the directory that contains the Kendo UI JS files:
<script src="~/Scripts/require.js" data-main="@Url.Content("~/Scripts/kendo/2013.2.716/")"></script>
2. Make your Kendo Wrappers Deferred()
3. Load the files and initialize the widgets:

<script>
    require([ "kendo.grid.min", "kendo.aspnetmvc.min"], initApp);
    function initApp() {
        @Html.Kendo().DeferredScripts(false)
    }
</script>

I have attached a sample project which shows a working implementation.

Regards,
Atanas Korchev
Telerik

[Pete Smith]

That works for the most part.
The problem is my application use alot of partial views that can be rendered anywhere, kind of like an MVC webpart, they can also be loaded via ajax. Since the partials don't know where they are being called from and the views that call them don't necessairaly know what they are rendering. Each partial view has to render the defered scripts at the bottom of the view. When there are multiple partial view being shown. The DeferredScripts method will be called more that once which results in duplicate scripts being rendered.

Any suggestion?

Thanks,
Pete

[Atanas Korchev]

Hi Peter,

 Could you please modify the attached sample project to demonstrate the problem you are having? We are finding it hard to understand your setup.

Regards,
Atanas Korchev
Telerik

[Pete Smith]

I've attached a sample application that demonstrates the issue.

Let me know your thoughts.

Thanks,
Pete

[Atanas Korchev]

Hi Peter,

 Thank you for providing a sample project. It clearly demonstrates the problem.

 We implemented a new method - DeferredScriptsFor(name) - which outputs the scripts of only the specified widget:

 @(Html.Kendo().Editor()
        .Name("MyEditor")
        .Deferred()
  )
    
<script>
    require(['jquery', 'kendo/kendo.editor.min', 'kendo/kendo.aspnetmvc.min'], function () {
        @Html.Kendo().DeferredScriptsFor("MyEditor", false)
    });
</script>

I have updated your project. The new assembly can be found in the lib directory of the solution.

Regards,
Atanas Korchev
Telerik

[Pete Smith]

This works exactly as I needed it to.

Thank you for helping me through my issues so quickly.

Sincerely,
Pete Smith

[Kai]

Hi,

I started using this approach in order to load kendo using deferred. My issue is, that all controls are displayed as the plain html input fields during the rendering process. Because of the deferred loading the controls are styled late at the end of the page load. 

This is a very ugly behavior and is reproduceable using your example. E.g. by extending the pager (see screenshot):

.Pageable(pageable => pageable.PageSizes(true))

The Page-Size dropdown will appear as an unstyled dropdown. At the end of the page load it will be transformed to the kendo dropdown.

Is there any way to get around this? Or is this by design if you are using kendo and requireJs by the need of the deferred loading?

 Thank you

Holger