Telerik Kendo UI MVC Extensions and Icky HTML

I like clean code. Remember the days of obtrusive JavaScript?

<a href="#" onclick="alert('You clicked!')">Click Me!</a>

Yuck.

Move that click event to a handler attached via JavaScript and that makes for much nicer HTML.

There are other annoyances that I encounter in HTML code beyond obtrusive JavaScript, one that gets to me is <script> tags all over the rendered HTML. Well, that’s exactly what happens when using the Kendo UI MVC Extensions! For example:

<body>
  ...
  <ul class="k-widget k-reset k-header k-menu" id="mainMenu">
    <li class="k-item k-state-highlight k-state-default">
      <a class="k-link" href="/">Home</a>
    </li>
    ...
  </ul>
  <script>
    jQuery(function () {
      jQuery("#mainMenu").kendoMenu({});
    });
  </script>
  ... more html ...
</body>

Icky HTML in my opinion. Ok, I’m nitpicking, but here’s one annoyance with this approach. I MUST declare jQuery and the Kendo UI JavaScript at the top of the page. I like my scripts to be nice and tidy at the bottom of the page, like a responsible web designer.

My recommendation for using Kendo UI would be to use it without the MVC helpers. Personally I love JavaScript; I don’t need no stinkin’ helpers :)

UPDATE: It looks like a “DeferredScripts” solution is coming in the Q1 2013 release of the Kendo UI, so this may soon be a moot point.

Damien White Twitter