MVC server wrappers and RequireJs

8 posts, 1 answers
  1. Pete Smith
    Pete Smith avatar
    5 posts
    Member since:
    Mar 2012

    Posted 23 Oct 2013 Link to this post

    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?



  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Pete Smith
    Pete Smith avatar
    5 posts
    Member since:
    Mar 2012

    Posted 24 Oct 2013 Link to this post

    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
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 25 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Pete Smith
    Pete Smith avatar
    5 posts
    Member since:
    Mar 2012

    Posted 25 Oct 2013 Link to this post

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

    Let me know your thoughts.

    Thanks,
    Pete
  7. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Pete Smith
    Pete Smith avatar
    5 posts
    Member since:
    Mar 2012

    Posted 28 Oct 2013 Link to this post

    This works exactly as I needed it to.

    Thank you for helping me through my issues so quickly.

    Sincerely,
    Pete Smith
  9. Holger
    Holger avatar
    10 posts
    Member since:
    Apr 2015

    Posted 10 Nov 2015 Link to this post

    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

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready