Questions on Kendo UI for Vue Forum

6 answers

250 views

Open Kendo Datepicker programmatically in Vue

Hi,

is there a way to open the date picker programmatically by passing a property? If not are there any alternative ways to do this? I need to open the date picker on label click in vue using type script.

Thanks

answered on 20 Aug 2019

1 answer

324 views

PopupAppendTo props in Kendo UI Components

Hi, I have used Kendo UI for Vue for quite some time now. I noticed that Kendo Dropdownlist components have the PopupAppendTo props to bind the dropdown to the element in template, while majority of the other components do not have and ending up appended to the body-tag (outside of <div id='app'>).

I'm quite surprised to see this because Vue.js only has control over the <div id='app'> element and Vue.js recommends against using body-tag. Why don't other components have this props as well so that Vue.js has full control over the Kendo UI components?

answered on 19 Aug 2019

1 answer

383 views

Export all data with page size

Dear Telerik Forum Admins,

Please find attached a screenshot of my current kendo-grid setup and DataSource.

I have implemented the excel functionality on my Vue Grid Wrapper, but the excel only contains the amount of records specified within the pageSize property of my DataSource.

I found a similar issue on the Angular form mentioning the fetchData property on the Angular Grid, but it is not clear to me how this should be implemented within Vue.js.

Could you please assist me in being able to implement both functionalities?

Kind regards,

Natasha L

Grid

answered on 16 Aug 2019

1 answer

130 views

Pass value(Parameter) to web api

Hi All,

I am new to vue.js and using kendo UI to display data. How can i pass value or parameter to web api from vue.js

answered on 13 Aug 2019

1 answer

210 views

Components not working in dev mode / Vue-Cli-3

Hi. I'm relatively new to vue-cli and I am having issues when running in development ('npm run serve'/'vue-cli-service serve') mode, particularly with the kendo components. The project runs fine in production mode, but I get all sorts of errors when running in dev mode.

I know the issue has to do with the compiling of components, and I know I have to add something to the vue.config.js file. I'm just not sure what that is. This is what my vue.config.js file looks like now:

const path = require('path');

function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
publicPath: '.',
devServer: {
proxy: '[URL]'
},
lintOnSave: true,
chainWebpack: (config) => {
config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
}
}

I have read this page, but that deals with vue-cli 2, not 3. (https://github.com/vuejs/vue/issues/2873)

Any help is appreciated.

answered on 12 Aug 2019

3 answers

568 views

MultiSelect with Checkbox

Hello All,

How can possible for adding checkbox in MultiSelect option ?

if checked 1 item in MultiSelect then show item text but if more than one item is selected then I want to display the item count.

let me know if its possible.

Regards,

Rahul

answered on 12 Aug 2019

1 answer

109 views

Checkbox selection doesn't work correctly with cell template (grid native)

As I said in the title: Checkbox selection doesn't work correctly with cell template (grid native).

Broken grid screen

The checkboxes didin't show up correctly, instead all data moved one column to the left. There is my code:

HTML:

<Grid

ref="grid"

:data-items="gridData"

:columns="gridHeaders"

:pageable="pageable"

:skip="skip"

:take="take"

:page-size="pageSize"

:total="tasks.totalElements"

@columnreorder="columnReorder"

:cell-render="'myTemplate'"

:scrollable="'none'"

:selected-field="selectedField"

>

<template slot="myTemplate" slot-scope="{props}">

<td :class="props.className">

<span v-if="props.field === 'actions'">

<VTooltip

v-if="type !== 'user'"

bottom

>

<VIcon

slot="activator"

style="cursor: pointer"

@click="assignTask([props.dataItem])"

>

{{ assignIcon }}

</VIcon>

<span>{{ assignToolTip }}</span>

</VTooltip>

<VTooltip

v-if="type === 'user'"

bottom

>

<VIcon

slot="activator"

style="cursor: pointer"

:disabled="!resolverRegistered(props.dataItem)"

@click.stop="resolveTask(props.dataItem)"

>

check

</VIcon>

<span>Resolve</span>

</VTooltip>

</span>

<span v-else>{{ getNestedValue(props.field, props.dataItem) }}</span>

</td>

</template>

</Grid>

Computed:

gridData() {

if (this.tasks.content) {

return this.tasks.content.map(item => {return {'selected': false, ...item}})

} else {

return []

}

},

areAllSelected() {

if (this.tasks.content) {

return this.tasks.content.findIndex(item => item.selected === false) === -1

} else {

return false

}

},

gridHeaders() {

return [

{field: 'selected', headerSelectionValue: this.areAllSelected}, ...this.headers

]

}

Methods:

getNestedValue(fieldName, dataItem) {

const path = fieldName.split('.');

let data = dataItem;

path.forEach((p) => {

data = data ? data[p] : undefined;

});

return data;

},

Data:

selectedField: 'selected',

Am I doing something in a wrong way? Or I have to implement those checkboxes in my own way.

I would be grateful for any help! :)

Grid

answered on 09 Aug 2019

11 answers

283 views

scheduler drop event for external items

Is there way to identify drop from external item ie. a list item from a list. into the scheduler?

I want to create appointments on drop event inside schedular.

Thank you in advance.

Grid

answered on 09 Aug 2019

1 answer

131 views

Grid (Native) Header cell in 2019.2.621

After updating to version 2019.2.621,table headers now has anchor tags with a style set to have cursor pointer.

To reproduce, this just take a look at the overview's basic usage example here https://www.telerik.com/kendo-vue-ui/components/grid-native/

Grid

answered on 06 Aug 2019

4 answers

151 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