Some CDN for grid (native)

[Tonys]

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

[Nencho]

Hello, Tonys,

We will update as soon as possible the documentation, regarding hte Native Grid for Vue and its CDN. Meanwhile, you can find below the needed script tags:

<script src="https://unpkg.com/@progress/kendo-vue-intl@0.2.1/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-vue-grid@0.2.1/dist/cdn/js/kendo-vue-grid.js"></script>

And here is a sample dojo example, where the above is used:

https://dojo.telerik.com/@nenchef/OtugUvuJ/3

Hope this would help.

Regards,
Nencho
Progress Telerik

[Adam]

In newer versions, it's slightly more complicated.

Including the CDN javascript file alone isn't sufficient.

    <script src="https://unpkg.com/@progress/kendo-vue-grid@latest/dist/cdn/js/kendo-vue-grid.js"></script>

You also need to make sure you have all the prerequisites. At the moment, some are missing from the documentation.

I managed to find them by inspecting the minified .js file downloaded from the CDN and looking for the prerequisites before the exports statement. (this is fairly easy, as the word "exports" only appears in the file once, and despite being minified, the prerequisites are fairly obvious to spot).

For this, I would recommend the Edge browser's development tools, as it does a fairly good job of formatting the minified .js to be somewhat readable.

So now that you've added all these prerequisites

    <script src="https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
    <script src="https://unpkg.com/@progress/kendo-data-query@latest/dist/cdn/js/kendo-data-query.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-data-tools@latest/dist/cdn/js/kendo-vue-data-tools.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
    <script src="https://unpkg.com/@progress/kendo-vue-buttons@latest/dist/cdn/js/kendo-vue-buttons.js"></script>

You're not quite there yet.

If you directly follow the example as shown at https://www.telerik.com/kendo-vue-ui/components/grid/data-binding/local-data-binding/ as shown below.

 createApp({
     components: {
         Grid: Grid,
         'grid-toolbar': GridToolbar,
         kbutton: Button,
     },
}).mouont('#vueapp')

You'll find that Grid, GridToolbar and Button are undefined.

At this point, the console will throw up various garbage depending on which browser you use, so you can safely ignore that.

The trick to getting it to work is realizing that the CDN .js files export a bunch of components, grouped together in like a namespace (sorry, I'm not a native .JS programmer).

Here's an example of my code which worked

<div id="vueapp" class="vue-app">
    <Grid ref="grid"
          :style="{ height: '320px' }"
          :data-items="result"
          :edit-field="'inEdit'"
          :sortable="true"
          :sort="sort"
          :filterable="true"
          :filter="filter"
          :pageable="true"
          :skip="skip"
          :take="take"
          @rowclick="rowClick"
          @sortchange="sortChangeHandler"
          @filterchange="filterChangeHandler"
          @pagechange="pageChangeHandler"
          @itemchange="itemChange"
          :columns="columns">
        <grid-toolbar>
            <div @click="closeEdit">
                <kbutton title="Add new" :theme-color="'primary'" @click="addRecord">
                    Add new
                </kbutton>
            </div>
        </grid-toolbar>
    </Grid>
</div>

 <script>
     const { createApp } = Vue;
     const process = KendoDataQuery.process;

     createApp({
         components: {
             Grid: KendoVueGrid.Grid,
             'grid-toolbar': KendoVueGrid.GridToolbar,
             kbutton: KendoVueButtons.Button,

             //All the other implementation details from the example
         },}).mount('#vueapp')

</script>

Then it behaves properly.

I think the "namespace" is the name of the CDN.js file that you initially wanted, rendered in PascalCase instead of hyphen-case.

I hope that someone stumbles across this post if you're trying to use Kendo UI for Vue without  NPM, Webpack, or other bundlers.

[Filip]

Hi, Adam,

Thank you for providing the steps required to use our components with a CDN. I agree that we haven't fully documented in detail the areas that you have covered and I understand how frustrating it might be for a new user to figure out the correct approach I apologize for any inconvenience this might have caused you. 

We have logged internal issues for updating the documentation of each component with more information on how each of them can be used with a CDN and this is something that we will improve in the future in our documentation.

Regards,
Filip

[Adam]

Hi Filip,

Thanks for the quick reply. I really wasn't expecting anyone to notice it. I've updated my reply to be a bit clearer, I hope it helps.