Kendo UI + Web Components

user_583523 0
Viewed 1090

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
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.
What am I missing???
Andrea
P.S.: the page is this one: http://docs.telerik.com/kendo-ui/third-party/webcomponents

Update:

I can obtain the behavior of the kendo grid, for example, with the following approach:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<script src="../telerik/js/kendo.all.min.js"></script>
<script src="../telerik/js/kendo.webcomponents.js"></script>

<dom-module id="my-view2">

  <link rel="import" type="css" href="../telerik/styles/kendo.common.min.css">
  <link rel="import" type="css" href="../telerik/styles/kendo.default.min.css">
  <link rel="import" type="css" href="../telerik/styles/kendo.default.mobile.min.css">

  <template>

    <style include="shared-styles">
       :host {
        display: block;

        padding: 10px;
      }
    </style>

    ...

  <div id="grid"></div>
  ...


  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
    });
  }

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...).
So for example sorting works, but I cannot see the correct icon.
When I try to filter, the form appears unstyled, and in the topleft corner of the window...

polymer kendo-ui
2 Answers

I've published webcomponent wrappers for Kendo UI Core at Kendoui-core-components that make Kendo UI (for jQuery) can be initialized through html element attributes, like:

<k-auto-complete id="customers"
                       data-text-field="ContactName"
                       data-source='{
                         type:"odata",
                         transport:{
                           read:"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"},
                           group:{field:"Country"}
                          }'
                       heigth="400"
                       style="width:100%"></k-auto-complete>

You can install the package by 'npm i kendoui-core-components'. Meanwhile I also authored a VSCode extension called 'vsc-kendo-core-components' which provides autocomplete for editing element attributes. Hope the two derivatives make Kendo UI for jQuery more intuitive and effective.

user_60571440
Related