Telerik Kendo UI MVC Extensions and Icky HTML

January 16, 2013 • Damien White

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.

Posted in asp.net, javascript, jquery, mvc and tagged with kendo-ui, telerik

Damien White

I am a software architect with over 15 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I knows in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails and ASP.NET MVC.

comments powered by Disqus