docs(treelist): add export to excel expanded rows kb

docs(listbox): add transfer on double click kb

docs(listbox): fix sentence

knowledge-base/examples/excel-export-treelist-expanded-rows/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')

knowledge-base/examples/excel-export-treelist-expanded-rows/main.vue

@@ -0,0 +1,113 @@
+<template>
+    <TreeList
+      :style="{
+        maxHeight: '510px',
+        overflow: 'auto',
+      }"
+      :expand-field="expandField"
+      :sub-items-field="subItemsField"
+      :data-items="processedData"
+      :columns="columns"
+      @expandchange="onExpandChange"
+      :toolbar="'toolbar'"
+    >
+      <template v-slot:toolbar>
+        <KButton :theme-color="'primary'" @click="exportExcel"
+          >Export Excel</KButton
+        >
+      </template>
+    </TreeList>
+  </template>
+
+  <script>
+  import employees from './data';
+  import { saveExcel } from '@progress/kendo-vue-excel-export';
+  import { Button } from '@progress/kendo-vue-buttons';
+  import {
+    TreeList,
+    treeToFlat,
+    mapTree,
+    extendDataItem,
+  } from '@progress/kendo-vue-treelist';
+  
+  export default {
+    components: {
+      TreeList,
+      KButton: Button,
+    },
+    data() {
+      return {
+        employees,
+        subItemsField: 'employees',
+        expandField: 'expanded',
+        expanded: [1, 2, 32],
+        columns: [
+          {
+            field: 'name',
+            title: 'Name',
+            width: '250px',
+            expandable: true,
+          },
+          {
+            field: 'hireDate',
+            title: 'Hire Date',
+            width: '200px',
+            format: '{0:d}',
+          },
+          {
+            field: 'timeInPosition',
+            title: 'Year(s) in Position',
+            width: '200px',
+          },
+          {
+            field: 'fullTime',
+            title: 'Full Time',
+            width: '100px',
+          },
+        ],
+      };
+    },
+    computed: {
+      processedData() {
+        let data = this.employees;
+        return this.addExpandField(data);
+      },
+    },
+    methods: {
+      exportExcel() {
+        const fullyExpandedData = mapTree(
+          this.employees,
+          this.subItemsField,
+          (item) =>
+            extendDataItem(item, this.subItemsField, {
+              [this.expandField]: true,
+            })
+        );
+        saveExcel({
+          fileName: 'myFile',
+          data: treeToFlat(
+            fullyExpandedData,
+            this.expandField,
+            this.subItemsField
+          ),
+          columns: this.columns,
+          hierarchy: true,
+        });
+      },
+      onExpandChange(e) {
+        this.expanded = e.value
+          ? this.expanded.filter((id) => id !== e.dataItem.id)
+          : [...this.expanded, e.dataItem.id];
+      },
+      addExpandField(dataTree) {
+        const expanded = this.expanded;
+        return mapTree(dataTree, this.subItemsField, (item) =>
+          extendDataItem(item, this.subItemsField, {
+            [this.expandField]: expanded.includes(item.id),
+          })
+        );
+      },
+    },
+  };
+  </script>
+

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')

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>