This is a migrated thread and some comments may be shown as answers.

Some CDN for grid (native)

2 Answers 81 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tonys
Top achievements
Rank 1
Tonys asked on 05 Mar 2019, 07:56 PM

Hi,

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

2 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 07 Mar 2019, 01:11 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Adam
Top achievements
Rank 1
Iron
answered on 07 Mar 2024, 10:16 PM | edited on 12 Mar 2024, 02:17 AM

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
Telerik team
commented on 11 Mar 2024, 03:15 PM

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
Top achievements
Rank 1
Iron
commented on 12 Mar 2024, 02:12 AM

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.

Tags
Grid
Asked by
Tonys
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Adam
Top achievements
Rank 1
Iron
Share this question
or