docs(listbox): add listbox kb article

telerik · Sep 30, 2024 · 0faa874 · 0faa874
1 parent a82718f
commit 0faa874
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 0 deletions.
diff --git a/knowledge-base/examples/listbox-scroll-to-bottom/main.js b/knowledge-base/examples/listbox-scroll-to-bottom/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')
diff --git a/knowledge-base/examples/listbox-scroll-to-bottom/main.vue b/knowledge-base/examples/listbox-scroll-to-bottom/main.vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div class="row justify-content-center">
+      <div class="col" style="padding-right: 0">
+        <h6>Employees</h6>
+        <ListBox
+          :style="{ height: '400px', width: '100%' }"
+          ref="employeesListRef"
+          :dataItems="employees"
+          :text-field="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick"
+          :toolbar="'toolbar'"
+          :draggable="true"
+          @dragstart="handleDragStart"
+          @drop="handleDrop"
+        >
+          <template v-slot:toolbar>
+            <ListBoxToolbar
+              :tools="[
+                'moveUp',
+                'moveDown',
+                'transferTo',
+                'transferFrom',
+                'transferAllTo',
+                'transferAllFrom',
+                'remove',
+              ]"
+              :dataItems="employees"
+              :dataConnected="developers"
+              @toolclick="handleToolBarClick"
+            />
+          </template>
+        </ListBox>
+      </div>
+
+      <div class="col" style="padding-right: 0; padding-left: 9px">
+        <h6>Developers</h6>
+        <ListBox
+          ref="developersListRef"
+          :style="{ height: '400px', width: '100%' }"
+          :dataItems="developers"
+          :textField="'name'"
+          :selectedField="SELECTED_FIELD"
+          @itemclick="itemClick2"
+          :draggable="true"
+          @dragstart="handleDragStart"
+          @drop="handleDrop"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ListBox,
+  ListBoxToolbar,
+  processListBoxData,
+  processListBoxDragAndDrop,
+} from '@progress/kendo-vue-listbox';
+const SELECTED_FIELD = 'selected';
+
+export default {
+  components: {
+    ListBox,
+    ListBoxToolbar,
+  },
+  data() {
+    return {
+      SELECTED_FIELD,
+      employees: [
+        { name: 'Steven White', selected: true },
+        { name: 'Nancy King', selected: false },
+        { name: 'Nancy Davolio', selected: false },
+        { name: 'Robert Davolio', selected: false },
+        { name: 'Michael Leverling', selected: false },
+        { name: 'Andrew Callahan', selected: false },
+        { name: 'Laura Callahan', selected: false },
+        { name: 'Anne Dodsworth', selected: false },
+        { name: 'Janet Leverling', selected: false },
+        { name: 'Margaret Peacock', selected: false },
+        { name: 'Paul Henley', selected: false },
+        { name: 'Lisa Davidson', selected: false },
+        { name: 'Samuel Hartman', selected: false },
+        { name: 'Eugene Perry', selected: false },
+        { name: 'Emma Brown', selected: false },
+        { name: 'Sophia Hart', selected: false },
+      ],
+      developers: [
+        { name: 'John Smith', selected: false },
+        { name: 'Alice Johnson', selected: false },
+        { name: 'James Williams', selected: false },
+        { name: 'Patricia Brown', selected: false },
+        { name: 'Linda Taylor', selected: false },
+        { name: 'Barbara Thomas', selected: false },
+        { name: 'Paul Wilson', selected: false },
+        { name: 'Christopher Lewis', selected: false },
+        { name: 'Dorothy Lee', selected: false },
+        { name: 'David Harris', selected: false },
+      ],
+      draggedItem: null,
+    };
+  },
+  methods: {
+    itemClick(e) {
+      this.handleItemClick(e, 'employees', 'developers');
+    },
+    itemClick2(e) {
+      this.handleItemClick(e, 'developers', 'employees');
+    },
+    handleItemClick(event, data, connectedData) {
+      this[data] = this[data].map((item) => {
+        if (item.name === event.dataItem.name) {
+          item[SELECTED_FIELD] = !item[SELECTED_FIELD];
+        } else if (!event.ctrlKey) {
+          item[SELECTED_FIELD] = false;
+        }
+        return item;
+      });
+      this[connectedData] = this[connectedData].map((item) => {
+        item[SELECTED_FIELD] = false;
+        return item;
+      });
+    },
+    handleToolBarClick(e) {
+      let toolName = e.toolName || '';
+      let result = processListBoxData(
+        this.employees,
+        this.developers,
+        toolName,
+        SELECTED_FIELD
+      );
+
+      this.employees = result.listBoxOneData;
+      this.developers = result.listBoxTwoData;
+
+      this.$nextTick(() => {
+        if (this.$refs.developersListRef) {
+          const listBoxElement = this.$refs.developersListRef.$el;
+          const listItems = listBoxElement.querySelectorAll('.k-list-item');
+          if (listItems.length > 0) {
+            listItems[listItems.length - 1].scrollIntoView({
+              behavior: 'smooth',
+            });
+          }
+        }
+      });
+    },
+    handleDragStart(e) {
+      this.draggedItem = e.dataItem;
+    },
+    handleDrop(e) {
+      let result = processListBoxDragAndDrop(
+        this.employees,
+        this.developers,
+        this.draggedItem,
+        e.dataItem,
+        'name'
+      );
+
+      this.employees = result.listBoxOneData;
+      this.developers = result.listBoxTwoData;
+
+      this.$nextTick(() => {
+        if (this.$refs.developersListRef) {
+          const listBoxElement = this.$refs.developersListRef.$el;
+          const listItems = listBoxElement.querySelectorAll('.k-list-item');
+          if (listItems.length > 0) {
+            listItems[listItems.length - 1].scrollIntoView({
+              behavior: 'smooth',
+            });
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/knowledge-base/listbox-scroll-to-bottom.md b/knowledge-base/listbox-scroll-to-bottom.md
@@ -0,0 +1,40 @@
+---
+title: Implement Scrolling to the Bottom for the Kendo UI for Vue Native ListBox
+description: An example on how to implement scroll-to-bottom behavior for the Kendo UI for Vue Native ListBox
+type: how-to
+page_title: Scroll to Bottom - Kendo UI for Vue Native ListBox
+slug: listbox-scroll-to-bottom
+tags: listbox, scroll, scroll to bottom
+ticketid: 1662799
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>5.2.0</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+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.
+
+## Solution
+
+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.
+
+{% meta height:480 %}
+{% embed_file listbox-scroll-to-bottom/main.vue preview %}
+{% embed_file listbox-scroll-to-bottom/main.js %}
+{% endmeta %}