Questions on Kendo UI for Vue Forum

8 answers

621 views

I'm really struggling here. I need to add a custom button which takes the ID of the current row. I've tried added a columns array and adding a "template" entry, to no luck and now trying to do this inline. Any help?

{field: 'name', title: 'District Name', width: '250px'},
{
width: '70px',
template: '<button class="btn btn-sm btn-info" v-on:click="alert(# _id #)">Edit</button>'
},

<kendo-grid id="grid"
:data-source-ref="'dataSource'"
class="table table-sm">
<kendo-grid-column :field="'name'" :title="'District Name'"></kendo-grid-column>
<kendo-grid-column :field="_id">
<button class="btn btn-sm btn-info" v-on:click="openManager(_id)">Manager</button>
</kendo-grid-column>
</kendo-grid>

answered on 24 Aug 2018

2 answers

1.2K+ views

Uncaught (in promise) ReferenceError: kendo is not defined

Hello,

I am receiving the following error when I try to implement ListView in my current project, "Uncaught (in promise) ReferenceError: kendo is not defined". I have seen similar issues posted but none of those solutions seem to apply to my situation.

In my current project I have implemented Kendo Grid and Dropdown. You can see below that the error is originating from the KendoListViewMixin.js file. I have installed the latest version of both "@progress/kendo-listview-vue-wrapper" & "@progress/kendo-ui", which should be all I need for what I am doing. Any insight into what I might be missing?

ListView wrapper

answered on 28 Jul 2022

1 answer

64 views

Screen reader support

A number of Kendo components could do with better support for screen readers, including:

Pagination (eg in a grid): page links should read something like "Go to page 1", not just "1".
Dialog's labelled by and close button less confusing - it currently reads the whole header row, several times in a row.
Upload / external drop target: Upload hints are running through without a gap.
Grid: the header is confusing noise, it reads out "table with zero rows and zero columns" (depending on grid scrolling settings)
Date / date range inputs: reads "day/month/year" but not the field label, it's very hard to navigate the date picker.

No doubt there are more than the above.

Effective screen reader accessibility is as much about what you skip as what you add. Where possible, audio prompts should be short and clear, and not produce excess noise.

answered on 02 Aug 2022

1 answer

68 views

How to loop thru array of object to create Kendo toolbar dynamically?

It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.

[
  {
    id: 0,
    type: "buttonGroup",
    text: "group1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "G1button1",
        icon: "",
        title: "button1",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "G1button2",
        icon: "",
        title: "button2",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 1,
    type: "splitButton",
    text: "splitButton1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "Insert above",
        icon: "insert-up",
        title: "Insert above",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert between",
        icon: "insert-middle",
        title: "Insert between",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert below",
        icon: "insert-down",
        title: "Insert below",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 2,
    type: "button",
    text: "Button1",
    icon: "",
    enabled: "true",
    togglable: "true",
    overflow: "auto",
    items: [],
  },
  {
    id: 3,
    type: "separator",
    text: "",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [],
  },
  {
    id: 4,
    type: "button",
    text: "Button2",
    icon: "",
    enabled: "false",
    togglable: "true",
    overflow: "always",
    items: [],
  },
]

Toolbar wrapper

answered on 02 Dec 2021

1 answer

116 views

How to watch grid setoption method execution completion in vue

Hi,

We are currently developing the Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript but we have encountered a problem.The problem is that when I enable some configuations such as editable or groupable will trigger setoptipn method and redraw the grid,it causes the toolbar custom button click event failure.I need to rebind the custom button click event after grid redraw,is there any way to watch grid setoption method execution completion or how to make custom button events not invalid?

Thank you very much and greetings

Grid wrapper

answered on 23 May 2022

4 answers

93 views

.kendo-multiviewcalendar --> WeekNumber column click event

HI,

I used "kendo-multiviewcalendar" component & i want to select whole week days related week number by clicking on the weeknumber.

is any options to enable this? or what is the way to implement it

Like,

selection

:week-number="true"

:selectable="'multiple'"

answered on 06 Aug 2019

1 answer

56 views

Access Scheduler Methods Through the Vue Wrapper

I need to call the addEvent method in the Scheduler without clicking into a specific time box in the UI. I basically want to do this, but in the Vue version: https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/methods/addevent

Specifically, I want to create a button on top of the calendar that will cause the event popup to appear and allow a new event to be entered into the calendar.
Can this be done with the Vue wrapper? I can't seem to access any of the methods in the underlying Scheduler widget (https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods).

answered on 13 Aug 2020

0 answers

106 views

Kendo Scheduler Vue Wrapper and iOS > 12 on iPAD not scrolling

Hello,

Kendo UI version: 2022.3.1109
Kendo Scheduler Vue Wrapper version : 2022.3.1109

Browser: Safari > v12

By default, iPad on iOS greater than version 12 using Safari are show websites in desktop mode. When the Scheduler is displayed, the scroll is not working (even if we force the settings mobile to true or phone or tablet). So we can't scroll through the timeline.

When we switch the iPad to request a mobile site, the scroll is working.

With an iPad with iOS version 12 or below, there is no issue.

I think the issue is related to this github issue I found for the Spreadsheet wrapper for vue: https://github.com/telerik/kendo-ui-core/issues/5300

Is there a work around for that ?

Best Regards,

Fabien

Scheduler wrapper

asked on 22 Dec 2022

1 answer

502 views

Scheduler prevent default action for 'remove' event

I am using custom screens and UI to interact with the scheduler so I am overriding the default behviour eg. fFor the 'edit' event I call e.preventDefault() and then show my screen to do whatever is necessary.

I can't figure out how to do this for 'remove' though as it seems that the remove event only fires after the built-in "do you want to delete the event" prompt is shown and ok is clicked.

I don't want to show any built-in UI but want to show my own delete confirmation and then do the delete api call manually - how is this possible?

Scheduler wrapper

answered on 20 Jul 2021

4 answers

1.1K+ views

How can I do server paging, filtering and sorting?

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

<div id="vueapp" class="vue-app">

<kendo-datasource ref="datasource1"

:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"

:transport-read-data-type="'jsonp'"

:transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"

:transport-update-data-type="'jsonp'"

:transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"

:transport-destroy-data-type="'jsonp'"

:transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"

:transport-create-data-type="'jsonp'"

:transport-parameter-map="parameterMap"

:server-paging="true"

:page-size='5'>

</kendo-datasource>

<kendo-grid :height="600"

:data-source-ref="'datasource1'"

:pageable='true'

:editable="'inline'"

:page-size='5'

:toolbar="['create']">

<kendo-grid-column field="ProductName"></kendo-grid-column>

<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>

<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>

<kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>

<kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>

</kendo-grid>

</div>

And here's my JS (using webpack):

Vue.use(GridInstaller);

Vue.use(DataSourceInstaller);

new Vue({

el: '#vueapp',

data: {

schemaModelFields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

UnitPrice: { type: 'number', validation: { required: true, min: 1 } },

Discontinued: { type: 'boolean' },

UnitsInStock: { type: 'number', validation: { min: 0, required: true } }

}

},

methods: {

customBoolEditor: function(container, options) {

kendo.jQuery('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)

kendo.jQuery('<label class="k-checkbox-label"></label>').appendTo(container)

},

parameterMap: function(options, operation) {

if (operation !== 'read' && options.models) {

return { models: kendo.stringify(options.models) }

}

})

Am I doing something wrong, or is this functionality not supported yet?