Questions on Kendo UI for Vue Forum

1 answer

126 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

306 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

144 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

167 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

6 answers

449 views

How can bind routing link in kendo ui treeview in vue js ?

I am facing issue with to bind the routing link directly in Kendo UI Treeview and for more details, I have put a router-link property in not working and you can view my code below.

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

02.<kendo-treeview>

03. <kendo-treeview-item text="User Setting" >

04.

05. <kendo-treeview-item text="User" router-link ="/setting/user" >User</kendo-treeview-item>

06. <kendo-treeview-item text="Role" router-link ="/setting/role"> </kendo-treeview-item>

07. <kendo-treeview-item text="Password Setting" router-link ="/setting/password"></kendo-treeview-item>

08.

09. </kendo-treeview-item>

10.

11. <kendo-treeview-item text="Group Setting" >

12.

13. <kendo-treeview-item text="Group"></kendo-treeview-item>

14. <kendo-treeview-item text="Group setting"></kendo-treeview-item>

15.

16. </kendo-treeview-item>

17.

18.

19.</kendo-treeview>

20.

21. </div>

answered on 05 Aug 2019

2 answers

656 views

How can i refresh grid datasource by button event?

How can i refresh grid datasource by button event.

I want to display data in certain time that user push the button.

How can i handling grid refresh event?

Grid

answered on 05 Aug 2019

1 answer

146 views

Is there a way to conditionally style a row for grid wrapper?

I am wanting to style a row and just change the background color based on the value of a certain cell of the row.

I am unsure on how to do this.

Grid

answered on 02 Aug 2019

2 answers

351 views

How to set Authorization header for transport read?

I already searched about this question and found answer for Kendo UI for jQuery.

but how can it be possible for Vue?

Grid

answered on 02 Aug 2019

1 answer

321 views

Multi-Day view in Kendo Scheduler

Hi

Can we have a Multi-Day view in Kendo Scheduler for Vue. I tried with passing a date array to kendo-scheduler but its accepting a date. Is there a way to do this?

Thanks

answered on 31 Jul 2019

1 answer

134 views

Drag items from dropdown lists

I have implemented a drop down list as follows. i want to drag items from this list. :draggable="true" :dropzone="true"

doesn't seems to trigger this. Items cannot be dragged. How to achieve this? Thank you in advance

<kendo-dropdownlist

v-model="dropdownlistValue"

:data-source="dataSourceArray"

:data-text-field="'text'"

:data-value-field="'value'"

:filter="'contains'"

:draggable="true"

:dropzone="true">

</kendo-dropdownlist>

dataSourceArray:any []=[{ text: 'Small', value: '1' }, { text: 'Medium', value: '2' }, { text: 'Large', value: '3' }, { text: 'X-Large', value: '4' }, { text: '2X-Large', value: '5' } ];

dropdownlistValue= "";

answered on 31 Jul 2019