docs(listbox): add transfer on double click kb

telerik · Nov 29, 2024 · cfc2c9b · cfc2c9b
1 parent 147f56d
commit cfc2c9b
Show file tree

Hide file tree

Showing 4 changed files with 1,375 additions and 0 deletions.
diff --git a/knowledge-base/examples/listbox/listbox-transfer-item-on-double-click/main.js b/knowledge-base/examples/listbox/listbox-transfer-item-on-double-click/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/listbox-transfer-item-on-double-click/main.vue b/knowledge-base/examples/listbox/listbox-transfer-item-on-double-click/main.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col" style="padding-right: 0">
+        <h6>Not Discontinued</h6>
+        <ListBox
+          :style="{ height: '400px', width: '100%' }"
+          :dataItems="notDiscontinued"
+          :textField="'ProductName'"
+          :selectedField="SELECTED_FIELD"
+          :toolbar="'toolbar'"
+          :item="'item'"
+        >
+          <template v-slot:item="{ props }">
+            <div
+              @dblclick="
+                handleDoubleClick(
+                  props.dataItem,
+                  'notDiscontinued',
+                  'discontinued'
+                )
+              "
+            >
+              <span :style="{ fontWeight: 'bold' }">{{
+                props.dataItem.ProductName
+              }}</span>
+              <br />
+              <span>Price: {{ props.dataItem.UnitPrice }}$</span>
+            </div>
+          </template>
+        </ListBox>
+      </div>
+      <div class="col" style="padding-right: 0; padding-left: 9px">
+        <h6>Discontinued</h6>
+        <ListBox
+          :style="{ height: '400px', width: '100%' }"
+          :dataItems="discontinued"
+          :textField="'ProductName'"
+          :selectedField="SELECTED_FIELD"
+          :item="'item'"
+        >
+          <template v-slot:item="{ props }">
+            <div
+              @dblclick="
+                handleDoubleClick(
+                  props.dataItem,
+                  'discontinued',
+                  'notDiscontinued'
+                )
+              "
+            >
+              <span :style="{ fontWeight: 'bold' }">{{
+                props.dataItem.ProductName
+              }}</span>
+              <br />
+              <span>Price: {{ props.dataItem.UnitPrice }}$</span>
+            </div>
+          </template>
+        </ListBox>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ListBox, ListBoxToolbar } from '@progress/kendo-vue-listbox';
+import products from './products.json';
+
+const parsedProducts = products.map((product) => {
+  product.selected = false;
+  return product;
+});
+
+const SELECTED_FIELD = 'selected';
+
+export default {
+  components: {
+    ListBox,
+    ListBoxToolbar,
+  },
+  data() {
+    return {
+      SELECTED_FIELD,
+      notDiscontinued: parsedProducts.filter(
+        (product) => !product.Discontinued
+      ),
+      discontinued: parsedProducts.filter((product) => product.Discontinued),
+    };
+  },
+  methods: {
+    handleDoubleClick(dataItem, sourceList, targetList) {
+      this[sourceList] = this[sourceList].filter(
+        (item) => item.ProductID !== dataItem.ProductID
+      );
+      this[targetList] = [...this[targetList], dataItem];
+    },
+  },
+};
+</script>