Using Kendo components within a polymer custom element

Question

I am researching how to add a layer of abstraction to Kendo UI components (e.g. grid).

One avenue I am exploring is wrapping up kendo components within a custom Polymer element; note that the Polymer element may contain more elements than just the kendo component.

This is one of my many attempts to get this working:

<polymer-element name="kendo-test" attributes="data">
<template>
    <div id="grid"></div>
</template>
<script>
    Polymer({
        data: [],

        ready: function () {

            var element = $("#grid").kendoGrid({
                dataSource: this.data,
                ...
            });

        }
    });
</script>

The script block runs okay, but the grid element doesn't get rendered (in the shadow DOM or otherwise). The contents of the element variable show that Kendo has done its thing.

I've also tried embedding a script tag within the template so Kendo executes once it has been rendered, but then I can't bind my data property.

Does anyone know how Kendo UI (or any other DOM manipulating 3rd party package) can be wrapped inside of polymer elements successfully?

Thanks

Drew Williams Drew Williams · Accepted Answer · 2014-12-10T15:24:13

Thanks to this answer I have found that you can reference shadow DOM elements if you use the Polymer reference and not the elements ID:

var element = $(this.$.grid).kendoGrid({

Using Kendo components within a polymer custom element

1 Answers