How to create a Kendo layout from existing HTML?

StackOverflow https://stackoverflow.com/questions/21863379

Question

I would like to use part of a page for my Kendo layout instead of feeding it with a raw HTML string. However, I am getting an error with this. Here is what I am trying to do:

<html>
<body>
  ...
  <div id="main">
    <div id="head">...</div>
    <div id="body">...</div>
    <div id="foot">...</div>
  </div>
  ...
  <script>
    var layout = new kendo.Layout($('#main').html());
    layout.showIn('#head', new kendo.View('<p>...</p>'));
  </script>
</body>
</html>

The #main element is part of the HTML page, so I want to cut it out and turn it into a Kendo layout to dynamically convert the page into a single-page app. This is the error I am gettin though:

Uncaught Error: Syntax error, unrecognized expression: <div id="head"></div>
    <div id="body"></div>
    <div id="foot"></div>

Not sure why because it works if I cut and paste the HTML into the layout initialize. I have a jsFiddle set up here: http://jsfiddle.net/bN754/

Was it helpful?

Solution 2

Ok I found that that the new lines and spaces in .html() was breaking it. So I had to scrub out the new lines and spaces before feeding it into the layout:

<html>
<body>
  ...
  <div id="main">
    <div id="head">...</div>
    <div id="body">...</div>
    <div id="foot">...</div>
  </div>
  ...
  <script>
    var html = $('#main').html().replace(/^\s+|\r\n|\n|\r|(>)\s+(<)|\s+$/gm, '$1$2');
    $('#main').empty();

    var layout = new kendo.Layout(html);
    layout.render("#main");
  </script>
</body>
</html>

http://jsfiddle.net/bN754/2/

OTHER TIPS

From Telerik documentation, I would think this is caused by the abscence of the render instruction on your layout object.

    <script>
        var layout = new kendo.Layout($('#main').html());
        layout.render($("#main"));
        layout.showIn('#head', new kendo.View('<p>...</p>'));
    </script>

Let me know if this resolves your issue, otherwise I have an other hypothesis. :-)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top