Questions on Kendo UI for Vue Forum

5 answers

172 views

Is It Possible to Use Kendo Vue with the ESM Runtime-Only Library?

Is it possible to use Kendo Vue with the ESM runtime-only library (i.e. vue.runtime.esm.js)?

I get the following error when trying to use the grid:

vue.runtime.esm.js:588 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

found in

---> <KendoGrid>
<Root>

I've read the thread "kendopanelbar causing You are using the runtime-only build of Vue " (https://www.telerik.com/forums/kendopanelbar-causing-you-are-using-the-runtime-only-build-of-vue). But, the solution suggested is to use vue.js (the full library).

answered on 09 Aug 2018

1 answer

160 views

Scheduler resources are not reactive

Hello,

I have been working with the Vue bindings for the Scheduler, and I ran into an issue with the scheduler resources not reacting properly to state changes. I believe this is a bug. It should be noted that this issue does not occur with the top-level scheduler data source. It reacts properly to async loading. Here's the issue:

Setting `:resources` to a static array of values (via state or getter) causes the scheduler to render correctly when grouping by that resource.

Example:

/* resources */

[{

field: "personId",

title: "Person",

name: "Person",

dataSource: this.$store.getters["schedule/scheduleResources"] //assume static array (below)

}];

/* static "schedule/scheduleResources"

[

{ value: 1, text: "John" },

{ value: 2, text: "Paul" }

]

*/

Setting `:resources` to an async generated array of values (via state or getter) causes the scheduler to render nothing when grouping by that resource, even when the state/getter is updated and re-evaluated.

Example:

Same as above, except the getter returns a state value that is initialized to an empty array and on created we call something like this to load the data. Once the data has been loaded, the expected behavior is that the Scheduler will update to reflect the new resources.

this.$store.dispatch("schedule/loadScheduleResources");

Workaround

I have been able to get around this by using a `kendo.data.DataSource` and setting a `read` function that manually dispatches the async fetch and returns the result. This delays the rendering of the scheduler until the resources are available. That looks like this:

/* resources */

[{

field: "personId",

title: "Person",

name: "Person",

batch: true,

dataSource: new kendo.data.DataSource({

transport: {

read: options => {

this.$store

.dispatch("schedule/loadScheduleResources")

.then(data => {

let result = this.$store.getters["schedule/scheduleResources"]; //now have data populated

options.success(result || []);

});

}

})

}];

I have included a minimal example to illustrate the issue. By default, the incorrect behavior is used. To switch to the workaround showing correct behavior, just look at `KendoSchedule.vue` and comment out the lines in `createPersonResource()`

answered on 09 Jul 2018

1 answer

142 views

Set global culture for grid component

I would like change the culture of my grid component but I don't know how to do this.

I try to follow this example but it doesn't work -_-

Kendo example :

https://www.telerik.com/kendo-vue-ui/components/grid/globalization/

The the format number don't work ... The number disappear...

My try :

How can I change the culture into the grid component ? :-)

Grid

answered on 12 Sep 2022

7 answers

444 views

kendo-maskedtextbox changes look after change of data

Hi All,

I'm testing the Kendo UI Vue-wrappers and notice an issue with the masked text box. When just loading the page, the input looks fine. But after entering data and exiting the field, the borders go away. First I thought I was doing something wrong, but then I noticed that example page does the same thing:

https://www.telerik.com/kendo-vue-ui/components/inputs/maskedtextbox/

This behavior, does not exists, for example, in the Angular version:

https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/

is this a bug and if so, where can I report it?

Thanks!

answered on 17 Oct 2018

2 answers

12 views

Paragraph and Heading not translated

Hello,

We want to have translations in Spanish, French and Portuguese for the users of our application who use such languages. We managed to translate all editor components, "Font Name", "Font Size". All successful except for the "FormatBlock".

In the FormatBlock dropdown, Kendo UI Rich Text editor is missing the translations and we will open a support case to request the feature.

In the meantime, we tried to do it ourselves. We implemented this

            <LocalizationProvider :language="language">
                <Editor
                    ref="editor"
                    :tools="tools"
                    :content-style="{
                        height: '160px',
                        width: '100%'
                    }"
                    :value="richTextValue"
                    @change="onChange"
                    @blur="onBlur"
                    >
                    <template v-slot:Pop2FormatBlockTool="{ props }">
                        <formatblock v-bind="props" />
                    </template>
                </Editor>
            </LocalizationProvider>

Of course, where, of course, we included this in the tools array:

        { render: "Pop2FormatBlockTool", props: this.pop2FormatBlockToolSettings },

Then we defined these variables in our Vue component, with default values

    kendoFormatBlockP: string = "P"
    kendoFormatBlockH1: string = "H1"
    kendoFormatBlockH2: string = "H2"
    kendoFormatBlockH3: string = "H3"
    kendoFormatBlockH4: string = "H4"
    kendoFormatBlockH5: string = "H5"
    kendoFormatBlockH6: string = "H6"
    pop2FormatBlockToolSettings: any = {
        ...EditorToolsSettings.formatBlock,
        items: [
            { text: this.kendoFormatBlockP, value: "p" },
            { text: this.kendoFormatBlockH1, value: "h1" },
            { text: this.kendoFormatBlockH2, value: "h2" },
            { text: this.kendoFormatBlockH3, value: "h3" },
            { text: this.kendoFormatBlockH4, value: "h4" },
            { text: this.kendoFormatBlockH5, value: "h5" },
            { text: this.kendoFormatBlockH6, value: "h6" }
        ]
    }

And we tried calling this method in beforeMounted() and mounted() to override the default values with the $t translations...

    initializeCustomTranslations(): void {
        this.kendoFormatBlockP = "Párrafo" // this.$t("telerik.editor.formatblock.p")
        this.kendoFormatBlockH1 = this.$t("telerik.editor.formatblock.h1")
        this.kendoFormatBlockH2 = this.$t("telerik.editor.formatblock.h2")
        this.kendoFormatBlockH3 = this.$t("telerik.editor.formatblock.h3")
        this.kendoFormatBlockH4 = this.$t("telerik.editor.formatblock.h4")
        this.kendoFormatBlockH5 = this.$t("telerik.editor.formatblock.h5")
        this.kendoFormatBlockH6 = this.$t("telerik.editor.formatblock.h6")
    }

But translation do not load and we lost the format (Heading 1 bigger than Heading 6).

Do you have any clue of what is going on, that prevents us from loading translations, and how to restore the format that we get in English?

Thanks for the help

Lucía

Editor

answered on 06 May 2024

0 answers

39 views

import "@progress/kendo-ui jQuery not found error

After upgrading vue wrapper components from 2022.2.621 to 2023.2.606 and @progress/kendo-ui from 2022.2.621 to 2023.1.425

and our native component from 3.3.3 to 3.11.0 we are getting an error Uncaught ReferenceError: jQuery is not defined

This literary stops us from working.

Is there any solution that we can try? Thanks!

General Discussions

asked on 07 Jul 2023

8 answers

135 views

tabstip error in iOS 13

There is a tabstip problem in ios 13.3. (iPad)

The tabstrip scroll icon is not clicked.

Click doesn't work so it's impossible to check the contents of the next tab.

Please confirm.

https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/

General Discussions

answered on 22 Jan 2020

0 answers

407 views

Kendo Grid Column Custom Menu custom template

Hello,

In my grid in the columns I put custom colum menu, so I can use directly the filters. The problem is that although everything seems to be working fine, when I click on on column filter it opens a popup, and when I click on one other columns filter it also opens a popup BUT does not close the previous one.

I ve seen examples where this functionality works, and some others that it does not. Is there a solution for when I open one columns filter popup to close all the others that is currently open?

Thanks

//This adds a custom template to my column menu
column.columnMenu = "CheckboxColumnFilterRender";
//This adds a custom icon and a custom color to my column header
headerClassName:"generic-filter-icon c-gray-600",
 
<templatev-slot:CheckboxColumnFilterRender="{ props }">
                        <NbGenericCheckboxesColumnFilter
                            v-if="gridDataReady"
                            :column="props.column"
                            :filterable="props.filterable"
                            :filter="props.filter"
                            :data-items="dataItems"
                            @filterChange="(e) => props.onFilterchange(e)"
                            @closeMenu="(e) => props.onClosemenu(e)"
                            @contentFocus="(e) => props.onContentfocus(e)"
                        ></NbGenericCheckboxesColumnFilter>
</template>

Grid

asked on 03 Feb 2023

3 answers

373 views

Kendo Grid: data-field Column Attribute not Rendered

I recently ran into a situation where an update method I wrote stopped working. The method uses jQuery to open a grid row, target 4 separate fields and change their values to new ones that have come in from an API call.

When I dug in, I discovered that the attribute my method uses to navigate to each field in the row, data-field="myFieldName", was completely missing. Thus the jQuery was finding nothing and no updates were happening.

The field is in all my other grids so I looked to see what I had done differently in this grid to make that disappear. Turns out a couple things: One was I added "editable" and "navigatable" as options to the grid, because I'm allowing in-cell editing. The other was I set "scrollable" to true (I typically set it to { virtual:true }).

As soon as I did this the "data-field" attribute stops being rendered in the columns. With "editable" and "navigatable" what I get instead is an attribute "aria-describedby=" with a cell-specific GUID. The "scrollable" property seems to just eliminate the data-field but has no other weird effects.

I need in-cell editing but I also need to have each field position identified. Is there a way I can force "data-field" to show up? Alternatively I could add a new "data-customAttribute" type of attr on there, but how do I accomplish that? Worst case I can add an identifier into the actual template for the column, which is just some simple HTML.

I'd prefer to do it with "data-field" since that would allow me to implement one consistent method for editing values whether a grid is marked as editable or not.

answered on 03 Mar 2020

5 answers

314 views

selecting rows in kendo-grid for vue, is slow

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid.

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {

var that = this;

var selected = $.map(ev.sender.select(), function(item) {

var tr = $(item).closest('tr');

var grid = that.$refs.itemsGrid.kendoWidget();

var data = grid.dataItem(tr);

return data.itemNumber;

});

this.$root.$emit('item-grid-selected',selected);

},

change: function(e) {

var selectedRows = e.sender.select();

var selectedDataItems = [];

for (var i = 0; i < selectedRows.length; i++) {

var dataItem = e.sender.dataItem(selectedRows[i]);

selectedDataItems.push(dataItem.name);

}

console.log(selectedDataItems);// contains all selected data items

this.$root.$emit('item-grid-selected',selectedDataItems);

},

with the grid code of:

<kendo-grid ref="itemsGrid"

:data-source="items"

v-on:databound="autoFitColumns"

:sortable-mode="'single'"

:sortable-allow-unsort="true"

:groupable="true"

:pageable="false"

:page-size="20"

:pageable-page-size="10"

:pageable-always-visible="false"

:filterable-mode="'row'"

:selectable="'multiple'"

:toolbar="[]"

:editable="false"

:server-paging="false"

:column-menu="true"

:scrollable-horizontal="true"

v-on:change="change"

v-on:save="grid_save">

</kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

Can you make any suggestions for speeding this up?

Regards
John