diff --git a/knowledge-base/examples/grid-scroll-specific-row/main.js b/knowledge-base/examples/grid-scroll-specific-row/main.js new file mode 100644 index 0000000..be9e20a --- /dev/null +++ b/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') diff --git a/knowledge-base/examples/grid-scroll-specific-row/main.vue b/knowledge-base/examples/grid-scroll-specific-row/main.vue new file mode 100644 index 0000000..6865e8e --- /dev/null +++ b/knowledge-base/examples/grid-scroll-specific-row/main.vue @@ -0,0 +1,86 @@ + + + diff --git a/knowledge-base/examples/maskedtextbox-country-formatting/main.js b/knowledge-base/examples/maskedtextbox-country-formatting/main.js new file mode 100644 index 0000000..be9e20a --- /dev/null +++ b/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') diff --git a/knowledge-base/examples/maskedtextbox-country-formatting/main.vue b/knowledge-base/examples/maskedtextbox-country-formatting/main.vue new file mode 100644 index 0000000..4a18116 --- /dev/null +++ b/knowledge-base/examples/maskedtextbox-country-formatting/main.vue @@ -0,0 +1,69 @@ + + + diff --git a/knowledge-base/grid-scroll-specific-row.md b/knowledge-base/grid-scroll-specific-row.md new file mode 100644 index 0000000..f2841e5 --- /dev/null +++ b/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: vue, grid, datagrid, scroll, scrollTo, specific, row +ticketid: 1660190 +res_type: kb +category: knowledge-base +--- + +## Environment + + + + + + + + + + + + +
Product Version5.2.0
ProductProgress® Kendo UI for Vue Native
+ +## 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 %} diff --git a/knowledge-base/maskedtextbox-country-formatting.md b/knowledge-base/maskedtextbox-country-formatting.md new file mode 100644 index 0000000..1c7b4cc --- /dev/null +++ b/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 + + + + + + + + + + + + +
Product Version5.2.0
ProductProgress® Kendo UI for Vue Native
+ +## 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 %} +