August kb articles

knowledge-base/examples/grid-scroll-specific-row/main.js

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

knowledge-base/examples/grid-scroll-specific-row/main.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <button @click="scrollToRow">Scroll to Row 15</button>
+    <div @keydown="handleKeyDown">
+      <Grid
+        ref="grid"
+        :style="{ height: '410px' }"
+        :data-items="items"
+        :selected-field="selectedField"
+        :columns="columns"
+        @rowclick="handleRowClick"
+      >
+      </Grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Grid } from "@progress/kendo-vue-grid";
+import products from "./products.json";
+
+export default {
+  components: {
+    Grid: Grid,
+  },
+  mounted() {
+    const a = this.$refs.grid.vs;
+    a.container.scrollTop = (this.selectedItem.ProductID - 1) * 36;
+  },
+  data() {
+    return {
+      selectedField: "selected",
+      selectedItem: {
+        ProductID: 48,
+        ProductName: "Chocolade",
+        SupplierID: 22,
+        CategoryID: 3,
+        QuantityPerUnit: "10 pkgs.",
+        UnitPrice: 12.75,
+        UnitsInStock: 15,
+        UnitsOnOrder: 70,
+        ReorderLevel: 25,
+        Discontinued: false,
+        Category: {
+          CategoryID: 3,
+          CategoryName: "Confections",
+          Description: "Desserts, candies, and sweet breads",
+        },
+      },
+      products: products,
+      columns: [
+        { field: "ProductName", title: "Product Name", width: "300px" },
+        { field: "UnitsInStock", title: "Units In Stock" },
+        { field: "UnitsOnOrder", title: "Units On Order" },
+        { field: "ReorderLevel", title: "Reorder Level" },
+      ],
+    };
+  },
+  computed: {
+    items() {
+      return this.products.map((item) => ({
+        ...item,
+        selected: this.selectedItem
+          ? item.ProductID === this.selectedItem.ProductID
+          : false,
+      }));
+    },
+  },
+  methods: {
+    scrollToRow() {
+      const productIDToScroll = 15;
+
+      const index = this.products.findIndex(
+        (item) => item.ProductID === productIDToScroll
+      );
+
+      if (index !== -1) {
+        const gridScrollHeight = 36;
+        this.$refs.grid.vs.container.scrollTop = index * gridScrollHeight;
+
+        this.selectedItem = this.products[index];
+      }
+    },
+  },
+};
+</script>

knowledge-base/examples/maskedtextbox-country-formatting/main.js

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

knowledge-base/examples/maskedtextbox-country-formatting/main.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div style="display: flex; align-items: center; gap: 10px">
+      <DropDownList
+        :style="{ width: '100px' }"
+        :data-items="countries"
+        :value="selectedCountry"
+        text-field="code"
+        value-field="code"
+        @change="handleCountryChange"
+      />
+      <MaskedTextBox
+        :style="{ width: '300px' }"
+        :mask="mask"
+        :value="value"
+        @change="handleOnChange"
+      />
+    </div>
+    <div v-if="formattedValue">
+      <p>Formatted Value: {{ formattedValue }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { MaskedTextBox } from "@progress/kendo-vue-inputs";
+import { DropDownList } from "@progress/kendo-vue-dropdowns";
+
+export default {
+  components: {
+    MaskedTextBox,
+    DropDownList,
+  },
+  data() {
+    return {
+      countries: [
+        { name: "Andorra", code: "🇦🇩", mask: "000-000-000", prefix: "+376" },
+        { name: "Germany", code: "🇩🇪", mask: "0000-0000000", prefix: "+49" },
+      ],
+      selectedCountry: null,
+      mask: "",
+      value: "",
+      formattedValue: "",
+    };
+  },
+  created() {
+    this.selectedCountry = this.countries[0];
+    this.mask = this.selectedCountry.mask;
+  },
+  methods: {
+    handleCountryChange(event) {
+      this.selectedCountry = event.target.value;
+      this.mask = this.selectedCountry ? this.selectedCountry.mask : "";
+      this.value = "";
+      this.formattedValue = "";
+    },
+    handleOnChange(event) {
+      const newValue = event.target.value;
+      this.value = newValue;
+      const cleanValue = newValue.replace(/[^0-9]/g, "");
+      if (this.selectedCountry) {
+        this.formattedValue = `${this.selectedCountry.prefix}${cleanValue}`;
+      } else {
+        this.formattedValue = newValue;
+      }
+    },
+  },
+};
+</script>

knowledge-base/grid-scroll-specific-row.md

@@ -0,0 +1,40 @@
+---
+title: Scroll to a specific row in the Kendo UI for Vue Native Grid
+description: Learn how scroll to a specific row in the Kendo UI for Vue Native Grid
+type: how-to
+page_title: How to scroll to a specific row in the Kendo UI for Vue Native Grid
+slug: grid-scroll-specific-row
+tags: grid, scroll, rows, row
+ticketid: 1660190
+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
+
+How can I scroll to a specific row in the Grid when clicking a button?
+
+## Solution
+
+This can be achieved by implementing a custom `scrollToRow` function that calculates the correct scroll position based on the row index and updates `this.selectedItem` to select the desired row while scrolling to its position
+
+{% meta id:index height:760 %}
+{% embed_file grid-scroll-specific-row/main.vue preview %}
+{% embed_file grid-scroll-specific-row/main.js %}
+{% embed_file shared/products.json %}
+{% endmeta %}

knowledge-base/maskedtextbox-country-formatting.md

@@ -0,0 +1,78 @@
+---
+title: Dynamically Format Phone Numbers by Country in Kendo UI for Vue Native MaskedTextBox
+description: Learn how to dynamically format phone numbers based on selected country codes using the Kendo UI for Vue Native MaskedTextBox
+type: how-to
+page_title: How to implement dynamic phone number formatting in the Kendo UI for Vue MaskedTextBox
+slug: maskedtextbox-country-formatting
+tags: maskedtextbox, dynamic, phone, number, formatting, masking, code
+ticketid: 1660190
+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
+
+How can I dynamically format a phone number based on a country code selected from a DropDownList using the MaskedTextBox?
+
+## Solution
+
+1. Define a list of countries with their corresponding phone number masks and prefixes:
+
+```jsx
+  const countries = [
+    { name: 'Andorra', code: '🇦🇩', mask: '000-000-000', prefix: '+376' },
+    { name: 'Germany', code: '🇩🇪', mask: '0000-0000000', prefix: '+49' },
+  ];
+```
+
+2. Handle the [onChange]({% slug api_dropdowns_dropdownlistprops %}#toc-onChange) event of the DropDownList to update the selected country and mask format:
+
+
+```jsx
+  methods: {
+    handleCountryChange(event) {
+      this.selectedCountry = event.target.value;
+      this.mask = this.selectedCountry ? this.selectedCountry.mask : '';
+      this.value = '';
+      this.formattedValue = '';
+    },
+  },
+```
+
+3. Handle the [onChange]({% slug api_inputs_maskedtextboxprops %}#toc-onChange) event of the MaskedTextBox to update the input value, apply the mask format and dynamically format the phone number:
+
+```jsx
+  methods: {
+    handleOnChange(event) {
+      const newValue = event.target.value;
+      this.value = newValue;
+      const cleanValue = newValue.replace(/[^0-9]/g, '');
+      if (this.selectedCountry) {
+        this.formattedValue = `${this.selectedCountry.prefix}${cleanValue}`;
+      } else {
+        this.formattedValue = newValue;
+      }
+    }
+  }
+```
+
+{% meta id:index height:500 %}
+{% embed_file maskedtextbox-country-formatting/main.vue preview %}
+{% embed_file maskedtextbox-country-formatting/main.js %}
+{% endmeta %}
+