From c90007c81268406be2a716afbb0ab10698989c2c Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Mon, 30 Sep 2024 15:29:11 +0300
Subject: [PATCH 1/2] docs(grid): add adjust height after page loads kb

---
 .../main.js                                   |   4 +
 .../main.vue                                  | 202 ++++++++++++++++++
 .../grid-adjust-height-after-page-loads.md    |  40 ++++
 3 files changed, 246 insertions(+)
 create mode 100644 knowledge-base/examples/grid-adjust-height-after-page-loads/main.js
 create mode 100644 knowledge-base/examples/grid-adjust-height-after-page-loads/main.vue
 create mode 100644 knowledge-base/grid-adjust-height-after-page-loads.md

diff --git a/knowledge-base/examples/grid-adjust-height-after-page-loads/main.js b/knowledge-base/examples/grid-adjust-height-after-page-loads/main.js
new file mode 100644
index 0000000..be9e20a
--- /dev/null
+++ b/knowledge-base/examples/grid-adjust-height-after-page-loads/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/grid-adjust-height-after-page-loads/main.vue b/knowledge-base/examples/grid-adjust-height-after-page-loads/main.vue
new file mode 100644
index 0000000..c9dd0d6
--- /dev/null
+++ b/knowledge-base/examples/grid-adjust-height-after-page-loads/main.vue
@@ -0,0 +1,202 @@
+<template>
+  <div
+    ref="gridContainer"
+    :style="{ height: '520px', border: 'solid 1px black' }"
+  >
+    <Grid
+      ref="grid"
+      :data-items="result"
+      :edit-field="'inEdit'"
+      :sortable="true"
+      :sort="sort"
+      :filterable="true"
+      :filter="filter"
+      :pageable="true"
+      :skip="skip"
+      :take="take"
+      @rowclick="rowClick"
+      @sortchange="sortChangeHandler"
+      @filterchange="filterChangeHandler"
+      @pagechange="pageChangeHandler"
+      @itemchange="itemChange"
+      :columns="columns"
+    >
+      <grid-toolbar>
+        <div @click="closeEdit">
+          <kbutton title="Add new" :theme-color="'primary'" @click="addRecord">
+            Add new
+          </kbutton>
+        </div>
+      </grid-toolbar>
+    </Grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridToolbar } from '@progress/kendo-vue-grid';
+import { Button } from '@progress/kendo-vue-buttons';
+import { process } from '@progress/kendo-data-query';
+
+export default {
+  components: {
+    Grid: Grid,
+    'grid-toolbar': GridToolbar,
+    kbutton: Button,
+  },
+  data: function () {
+    return {
+      updatedData: [],
+      editID: null,
+      sort: null,
+      filter: null,
+      skip: 0,
+      take: 3,
+      columns: [
+        { field: 'ProductID', editable: false, title: 'ID', width: '80px' },
+        { field: 'ProductName', title: 'Name' },
+        {
+          field: 'FirstOrderedOn',
+          editor: 'date',
+          title: 'First Ordered',
+          format: '{0:d}',
+        },
+        {
+          field: 'UnitsInStock',
+          title: 'Units',
+          width: '150px',
+          editor: 'numeric',
+        },
+        { field: 'Discontinued', title: 'Discontinued', editor: 'boolean' },
+      ],
+      gridData: [
+        {
+          ProductID: 1,
+          ProductName: 'Chai',
+          UnitsInStock: 39,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 8, 20),
+        },
+        {
+          ProductID: 2,
+          ProductName: 'Chang',
+          UnitsInStock: 17,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 7, 12),
+        },
+        {
+          ProductID: 3,
+          ProductName: 'Aniseed Syrup',
+          UnitsInStock: 13,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 8, 26),
+        },
+        {
+          ProductID: 4,
+          ProductName: 'Cajun Seasoning',
+          UnitsInStock: 53,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 9, 19),
+        },
+        {
+          ProductID: 5,
+          ProductName: 'Orange',
+          UnitsInStock: 51,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 9, 19),
+        },
+        {
+          ProductID: 6,
+          ProductName: 'Banana',
+          UnitsInStock: 22,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 9, 19),
+        },
+        {
+          ProductID: 7,
+          ProductName: 'Apple',
+          UnitsInStock: 16,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 9, 19),
+        },
+        {
+          ProductID: 8,
+          ProductName: 'Peach',
+          UnitsInStock: 10,
+          Discontinued: false,
+          FirstOrderedOn: new Date(1996, 9, 19),
+        },
+      ],
+    };
+  },
+  computed: {
+    getData() {
+      return this.gridData.map((item) =>
+        Object.assign({ inEdit: item.ProductID === this.editID }, item)
+      );
+    },
+    result: {
+      get: function () {
+        return process(this.gridData, {
+          sort: this.sort,
+          filter: this.filter,
+          take: this.take,
+          skip: this.skip,
+        });
+      },
+    },
+  },
+  methods: {
+    itemChange: function (e) {
+      const data = this.gridData.slice();
+      const index = data.findIndex((d) => d.ProductID === e.dataItem.ProductID);
+      data[index] = { ...data[index], [e.field]: e.value };
+      this.gridData = data;
+      if (event.dataItem) {
+        event.dataItem[e.field] = e.value;
+      }
+    },
+    rowClick: function (e) {
+      this.gridData.map((item) => (item.inEdit = false));
+      this.editID = e.dataItem.ProductID;
+      e.dataItem.inEdit = true;
+    },
+    closeEdit(e) {
+      if (e.target === e.currentTarget) {
+        this.editID = null;
+      }
+    },
+    addRecord() {
+      const newRecord = { ProductID: this.gridData.length + 1 };
+      const data = this.gridData.slice();
+      data.unshift(newRecord);
+      this.gridData = data;
+      this.editID = newRecord.ProductID;
+    },
+    sortChangeHandler(event) {
+      this.sort = event.sort;
+    },
+    filterChangeHandler(event) {
+      this.filter = event.filter;
+    },
+    pageChangeHandler(event) {
+      this.take = event.page.take;
+      this.skip = event.page.skip;
+    },
+    adjustGridHeight() {
+      const grid = this.$refs.grid;
+      if (grid) {
+        grid.$el.style.height = `50%`;
+      }
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.adjustGridHeight();
+    }, 3000);
+    window.addEventListener('resize', this.adjustGridHeight);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.adjustGridHeight);
+  },
+};
+</script>
diff --git a/knowledge-base/grid-adjust-height-after-page-loads.md b/knowledge-base/grid-adjust-height-after-page-loads.md
new file mode 100644
index 0000000..cb48963
--- /dev/null
+++ b/knowledge-base/grid-adjust-height-after-page-loads.md
@@ -0,0 +1,40 @@
+---
+title: Change the Height of the Grid Programmatically After the Page Loads
+description: An example on how to change the height of the Grid programmatically after the page loads
+type: how-to
+page_title: Change the Height of the Grid Programmatically After the Page Loads - Kendo UI for Vue Native Grid
+slug: grid-adjust-height-after-page-loads
+tags: grid, page, loads, height, programmatically
+ticketid: 1659873
+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
+
+Is there a way to change the height of the Grid programmatically after the page loads?
+
+## Solution
+
+This can be achieved by passing a ref to the Grid and then changing the height as required in the `mounted` hook.
+
+{% meta id:index height:400 %}
+{% embed_file grid-adjust-height-after-page-loads/main.vue preview %}
+{% embed_file grid-adjust-height-after-page-loads/main.js %}
+{% endmeta %}

From 66eca7078bde111f8cb48b4ab88fbcfe938ceb23 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Mon, 30 Sep 2024 15:35:35 +0300
Subject: [PATCH 2/2] docs(listbox): add listbox kb article

---
 .../examples/listbox-scroll-to-bottom/main.js |   4 +
 .../listbox-scroll-to-bottom/main.vue         | 185 ++++++++++++++++++
 knowledge-base/listbox-scroll-to-bottom.md    |  40 ++++
 3 files changed, 229 insertions(+)
 create mode 100644 knowledge-base/examples/listbox-scroll-to-bottom/main.js
 create mode 100644 knowledge-base/examples/listbox-scroll-to-bottom/main.vue
 create mode 100644 knowledge-base/listbox-scroll-to-bottom.md

diff --git a/knowledge-base/examples/listbox-scroll-to-bottom/main.js b/knowledge-base/examples/listbox-scroll-to-bottom/main.js
new file mode 100644
index 0000000..be9e20a
--- /dev/null
+++ 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
new file mode 100644
index 0000000..37bb7c7
--- /dev/null
+++ 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
new file mode 100644
index 0000000..aecb107
--- /dev/null
+++ 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 %}