title: Kendo UI + Web Components
body: <p>Since I had problems, with a simple test, I went back to the original Telerik page that shows the integration of the kendo components in a polymer application<br>
  It looks like ANY example (it's easy, since there is a Dojo link...) doesn't work, at least with the current version of Kendo.<br>
  What am I missing???<br>
  Andrea<br>
  P.S.: the page is this one: <a href="http://docs.telerik.com/kendo-ui/third-party/webcomponents" rel="nofollow noreferrer">http://docs.telerik.com/kendo-ui/third-party/webcomponents</a></p>
  
  <p><strong>Update</strong>:</p>
  
  <p>I can obtain the behavior of the kendo grid, for example, with the following approach:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="shared-styles.html"&gt;
  
  &lt;script src="../telerik/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;script src="../telerik/js/kendo.webcomponents.js"&gt;&lt;/script&gt;
  
  &lt;dom-module id="my-view2"&gt;
  
    &lt;link rel="import" type="css" href="../telerik/styles/kendo.common.min.css"&gt;
    &lt;link rel="import" type="css" href="../telerik/styles/kendo.default.min.css"&gt;
    &lt;link rel="import" type="css" href="../telerik/styles/kendo.default.mobile.min.css"&gt;
  
    &lt;template&gt;
  
      &lt;style include="shared-styles"&gt;
         :host {
          display: block;
  
          padding: 10px;
        }
      &lt;/style&gt;
  
      ...
  
    &lt;div id="grid"&gt;&lt;/div&gt;
    ...
  
  
    ready: function () {
      var element = $(this.$.grid).kendoGrid({
        dataSource: [
          { Id: 1, Name: 'Pamela Andersson' },
          { Id: 2, Name: 'Naomi Campbell' },
          { Id: 3, Name: 'Monica Bellucci' }
        ],
        sortable: true,
        filterable: true,
        selectable: true
      });
    }
  </code></pre>
  
  <p>But I cannot obtain the styles correctly applied. Even if the official documentation says that it's deprecated, it should still work, including the external stylesheets as you can see in the code (any other 'position' breaks the code...).<br>
  So for example sorting works, but I cannot see the correct icon.<br>
  When I try to filter, the form appears unstyled, and in the topleft corner of the window...</p>