Skip to content

Commit 0faa874

Browse files
filipKovachevfilipKovachev
committed
docs(listbox): add listbox kb article
1 parent a82718f commit 0faa874

File tree

3 files changed

+229
-0
lines changed

3 files changed

+229
-0
lines changed

‎knowledge-base/examples/listbox-scroll-to-bottom/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './main.vue'
3+
4+
createApp(App).mount('#app')

‎knowledge-base/examples/listbox-scroll-to-bottom/main.vue

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<template>
2+
<div>
3+
<div class="row justify-content-center">
4+
<div class="col" style="padding-right: 0">
5+
<h6>Employees</h6>
6+
<ListBox
7+
:style="{ height: '400px', width: '100%' }"
8+
ref="employeesListRef"
9+
:dataItems="employees"
10+
:text-field="'name'"
11+
:selectedField="SELECTED_FIELD"
12+
@itemclick="itemClick"
13+
:toolbar="'toolbar'"
14+
:draggable="true"
15+
@dragstart="handleDragStart"
16+
@drop="handleDrop"
17+
>
18+
<template v-slot:toolbar>
19+
<ListBoxToolbar
20+
:tools="[
21+
'moveUp',
22+
'moveDown',
23+
'transferTo',
24+
'transferFrom',
25+
'transferAllTo',
26+
'transferAllFrom',
27+
'remove',
28+
]"
29+
:dataItems="employees"
30+
:dataConnected="developers"
31+
@toolclick="handleToolBarClick"
32+
/>
33+
</template>
34+
</ListBox>
35+
</div>
36+
37+
<div class="col" style="padding-right: 0; padding-left: 9px">
38+
<h6>Developers</h6>
39+
<ListBox
40+
ref="developersListRef"
41+
:style="{ height: '400px', width: '100%' }"
42+
:dataItems="developers"
43+
:textField="'name'"
44+
:selectedField="SELECTED_FIELD"
45+
@itemclick="itemClick2"
46+
:draggable="true"
47+
@dragstart="handleDragStart"
48+
@drop="handleDrop"
49+
/>
50+
</div>
51+
</div>
52+
</div>
53+
</template>
54+
55+
<script>
56+
import {
57+
ListBox,
58+
ListBoxToolbar,
59+
processListBoxData,
60+
processListBoxDragAndDrop,
61+
} from '@progress/kendo-vue-listbox';
62+
const SELECTED_FIELD = 'selected';
63+
64+
export default {
65+
components: {
66+
ListBox,
67+
ListBoxToolbar,
68+
},
69+
data() {
70+
return {
71+
SELECTED_FIELD,
72+
employees: [
73+
{ name: 'Steven White', selected: true },
74+
{ name: 'Nancy King', selected: false },
75+
{ name: 'Nancy Davolio', selected: false },
76+
{ name: 'Robert Davolio', selected: false },
77+
{ name: 'Michael Leverling', selected: false },
78+
{ name: 'Andrew Callahan', selected: false },
79+
{ name: 'Laura Callahan', selected: false },
80+
{ name: 'Anne Dodsworth', selected: false },
81+
{ name: 'Janet Leverling', selected: false },
82+
{ name: 'Margaret Peacock', selected: false },
83+
{ name: 'Paul Henley', selected: false },
84+
{ name: 'Lisa Davidson', selected: false },
85+
{ name: 'Samuel Hartman', selected: false },
86+
{ name: 'Eugene Perry', selected: false },
87+
{ name: 'Emma Brown', selected: false },
88+
{ name: 'Sophia Hart', selected: false },
89+
],
90+
developers: [
91+
{ name: 'John Smith', selected: false },
92+
{ name: 'Alice Johnson', selected: false },
93+
{ name: 'James Williams', selected: false },
94+
{ name: 'Patricia Brown', selected: false },
95+
{ name: 'Linda Taylor', selected: false },
96+
{ name: 'Barbara Thomas', selected: false },
97+
{ name: 'Paul Wilson', selected: false },
98+
{ name: 'Christopher Lewis', selected: false },
99+
{ name: 'Dorothy Lee', selected: false },
100+
{ name: 'David Harris', selected: false },
101+
],
102+
draggedItem: null,
103+
};
104+
},
105+
methods: {
106+
itemClick(e) {
107+
this.handleItemClick(e, 'employees', 'developers');
108+
},
109+
itemClick2(e) {
110+
this.handleItemClick(e, 'developers', 'employees');
111+
},
112+
handleItemClick(event, data, connectedData) {
113+
this[data] = this[data].map((item) => {
114+
if (item.name === event.dataItem.name) {
115+
item[SELECTED_FIELD] = !item[SELECTED_FIELD];
116+
} else if (!event.ctrlKey) {
117+
item[SELECTED_FIELD] = false;
118+
}
119+
return item;
120+
});
121+
this[connectedData] = this[connectedData].map((item) => {
122+
item[SELECTED_FIELD] = false;
123+
return item;
124+
});
125+
},
126+
handleToolBarClick(e) {
127+
let toolName = e.toolName || '';
128+
let result = processListBoxData(
129+
this.employees,
130+
this.developers,
131+
toolName,
132+
SELECTED_FIELD
133+
);
134+
135+
this.employees = result.listBoxOneData;
136+
this.developers = result.listBoxTwoData;
137+
138+
this.$nextTick(() => {
139+
if (this.$refs.developersListRef) {
140+
const listBoxElement = this.$refs.developersListRef.$el;
141+
const listItems = listBoxElement.querySelectorAll('.k-list-item');
142+
if (listItems.length > 0) {
143+
listItems[listItems.length - 1].scrollIntoView({
144+
behavior: 'smooth',
145+
});
146+
}
147+
}
148+
});
149+
},
150+
handleDragStart(e) {
151+
this.draggedItem = e.dataItem;
152+
},
153+
handleDrop(e) {
154+
let result = processListBoxDragAndDrop(
155+
this.employees,
156+
this.developers,
157+
this.draggedItem,
158+
e.dataItem,
159+
'name'
160+
);
161+
162+
this.employees = result.listBoxOneData;
163+
this.developers = result.listBoxTwoData;
164+
165+
this.$nextTick(() => {
166+
if (this.$refs.developersListRef) {
167+
const listBoxElement = this.$refs.developersListRef.$el;
168+
const listItems = listBoxElement.querySelectorAll('.k-list-item');
169+
if (listItems.length > 0) {
170+
listItems[listItems.length - 1].scrollIntoView({
171+
behavior: 'smooth',
172+
});
173+
}
174+
}
175+
});
176+
},
177+
},
178+
};
179+
</script>
180+
181+
<style scoped>
182+
.row {
183+
margin-bottom: 20px;
184+
}
185+
</style>

‎knowledge-base/listbox-scroll-to-bottom.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Implement Scrolling to the Bottom for the Kendo UI for Vue Native ListBox
3+
description: An example on how to implement scroll-to-bottom behavior for the Kendo UI for Vue Native ListBox
4+
type: how-to
5+
page_title: Scroll to Bottom - Kendo UI for Vue Native ListBox
6+
slug: listbox-scroll-to-bottom
7+
tags: listbox, scroll, scroll to bottom
8+
ticketid: 1662799
9+
res_type: kb
10+
category: knowledge-base
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product Version</td>
19+
<td>5.2.0</td>
20+
</tr>
21+
<tr>
22+
<td>Product</td>
23+
<td>Progress® Kendo UI for Vue Native</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
29+
## Description
30+
31+
I want to implement a scroll-to-bottom behavior for the ListBox when an item is dragged and dropped or when an item is transferred between ListBoxes.
32+
33+
## Solution
34+
35+
To implement the scroll-to-bottom behavior, first, obtain a reference to the ListBox component. In the [onToolClick]({% slug api_listbox_listboxtoolbarprops %}#toc-ontoolbarclick) event of the `ListBoxToolbar` and the [onDrop]({% slug api_listbox_listboxprops %}#toc-ondrop) event of the ListBox, use the `scrollIntoView` method to scroll to the bottom whenever an item is dropped or transferred using the arrows.
36+
37+
{% meta height:480 %}
38+
{% embed_file listbox-scroll-to-bottom/main.vue preview %}
39+
{% embed_file listbox-scroll-to-bottom/main.js %}
40+
{% endmeta %}

0 commit comments

Comments
 (0)