From a839ac937d56be213639fd266f2c545a7ae96adc Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 3 Apr 2026 21:03:25 +0530 Subject: [PATCH] Integrated latest changes at 04-03-2026 10:40:45 AM --- .../tab/dynamic-tab-snippet/index.js | 12 ++++ .../tab/dynamic-tab-snippet/index.ts | 12 ++++ .../index.js | 8 +++ .../index.ts | 8 +++ .../enable-tab-key-navigation/index.js | 8 +++ .../enable-tab-key-navigation/index.ts | 8 +++ .../tab/how-to/load-tab-items-dynamically.md | 31 +++++----- ej2-javascript/toolbar/item-configuration.md | 61 +++++++++++-------- 8 files changed, 110 insertions(+), 38 deletions(-) create mode 100644 ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.js create mode 100644 ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.ts create mode 100644 ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.js create mode 100644 ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.ts create mode 100644 ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.js create mode 100644 ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.ts diff --git a/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.js b/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.js new file mode 100644 index 000000000..b8ec4d90f --- /dev/null +++ b/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.js @@ -0,0 +1,12 @@ +// Fetch new tab title and content from input elements +var tabTitle = document.getElementById('tab-title').value; +var content = document.getElementById('tab-content').value; + +// Create a tab item object using the input values +var item = { + header: { text: tabTitle }, + content: ej.base.createElement('pre', { innerHTML: content.replace(/\n/g, '
\n') }).outerHTML +}; + +// Add the new tab at the specified index +tabObj.addTab([item], index); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.ts b/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.ts new file mode 100644 index 000000000..c82cee487 --- /dev/null +++ b/ej2-javascript/code-snippet/tab/dynamic-tab-snippet/index.ts @@ -0,0 +1,12 @@ +// Fetch new tab title and content from input elements +let tabTitle: string = document.getElementById('tab-title').value; +let content: string = document.getElementById('tab-content').value; + +// Create a tab item object using the input values +let item: Object = { + header: { text: tabTitle }, + content: createElement('pre', { innerHTML: content.replace(/\n/g, '
\n') }).outerHTML +}; + +// Add the new tab at the specified index +tabObj.addTab([item], index); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.js b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.js new file mode 100644 index 000000000..638d9f669 --- /dev/null +++ b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.js @@ -0,0 +1,8 @@ + + +var toolbar = new ej.navigations.Toolbar({ + items: [ + { text: "Item 1", tabIndex: 0 }, + { text: "Item 2", tabIndex: 0 } + ] +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.ts b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.ts new file mode 100644 index 000000000..5b0da00a4 --- /dev/null +++ b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation-snippet/index.ts @@ -0,0 +1,8 @@ +import {Toolbar} from '@syncfusion/ej2-navigations'; + +let toolbar: Toolbar = new Toolbar({ + items: [ + { text: "Item 1", tabIndex: 0 }, + { text: "Item 2", tabIndex: 0 } + ] +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.js b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.js new file mode 100644 index 000000000..80a185161 --- /dev/null +++ b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.js @@ -0,0 +1,8 @@ + + +var toolbar = new ej.navigations.Toolbar({ + items: [ + { text: "Item 1", tabIndex: 1 }, + { text: "Item 2", tabIndex: 2 } + ] +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.ts b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.ts new file mode 100644 index 000000000..830589df7 --- /dev/null +++ b/ej2-javascript/code-snippet/toolbar/enable-tab-key-navigation/index.ts @@ -0,0 +1,8 @@ +import {Toolbar} from '@syncfusion/ej2-navigations'; + +let toolbar: Toolbar = new Toolbar({ + items: [ + { text: "Item 1", tabIndex: 1 }, + { text: "Item 2", tabIndex: 2 } + ] +}); \ No newline at end of file diff --git a/ej2-javascript/tab/how-to/load-tab-items-dynamically.md b/ej2-javascript/tab/how-to/load-tab-items-dynamically.md index b9ddcaa92..6f1c30a6c 100644 --- a/ej2-javascript/tab/how-to/load-tab-items-dynamically.md +++ b/ej2-javascript/tab/how-to/load-tab-items-dynamically.md @@ -13,20 +13,23 @@ domainurl: ##DomainURL## You can add tabs dynamically to the Tab control by passing an array of items and an index value to the [`addTab`](../../api/tab#addtab) method. Here's how you can do it: -```ts -// Fetch new tab title and content from input elements -let tabTitle: string = document.getElementById('tab-title').value; -let content: string = document.getElementById('tab-content').value; - -// Create a tab item object using the input values -let item: Object = { - header: { text: tabTitle }, - content: createElement('pre', { innerHTML: content.replace(/\n/g, '
\n') }).outerHTML -}; - -// Add the new tab at the specified index -tabObj.addTab([item], index); -``` +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/tab/dynamic-tab-snippet/index.ts %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/tab/dynamic-tab-snippet/index.js %} +{% endhighlight %} +{% endtabs %} + +{% endif %} In the following example, we'll demonstrate how to add tabs dynamically: diff --git a/ej2-javascript/toolbar/item-configuration.md b/ej2-javascript/toolbar/item-configuration.md index 18f428828..1a91b6ad4 100644 --- a/ej2-javascript/toolbar/item-configuration.md +++ b/ej2-javascript/toolbar/item-configuration.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Item configuration in ##Platform_Name## Toolbar control -The Toolbar can be rendered by defining an array of [`items`](../api/toolbar/#items). Items can be constructed using the following built-in command types or item templates. +The Toolbar can be rendered by defining an array of [`items`](../api/toolbar#items). Items can be constructed using the following built-in command types or item templates. ## Button @@ -148,44 +148,57 @@ E.g.: The following code explains how to add `NumericTextBox`,`DropDownList`,`Ra ### Enabling tab key navigation in Toolbar -The [`tabIndex`](../api/toolbar/item/#tabindex) property of a Toolbar item is used to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the [`tabIndex`](../api/toolbar/item/#tabindex) property allows you to switch between items using the Tab and Shift+Tab keys as well. +The [`tabIndex`](../api/toolbar/item#tabindex) property of a Toolbar item is used to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the [`tabIndex`](../api/toolbar/item#tabindex) property allows you to switch between items using the Tab and Shift+Tab keys as well. -To use the [`tabIndex`](../api/toolbar/item/#tabindex) property, you need to set it for each Toolbar item that you want to enable tab key navigation. The [`tabIndex`](../api/toolbar/item/#tabindex) property should be set to a positive integer value. A value of 0 or a negative value will disable tab key navigation for the item. +To use the [`tabIndex`](../api/toolbar/item#tabindex) property, you need to set it for each Toolbar item that you want to enable tab key navigation. The [`tabIndex`](../api/toolbar/item#tabindex) property should be set to a positive integer value. A value of 0 or a negative value will disable tab key navigation for the item. For example, to enable tab key navigation for two Toolbar items, you can use the following code: -```ts -import {Toolbar} from '@syncfusion/ej2-navigations'; +{% if page.publishingplatform == "typescript" %} -let toolbar: Toolbar = new Toolbar({ - items: [ - { text: "Item 1", tabIndex: 1 }, - { text: "Item 2", tabIndex: 2 } - ] -}); -``` + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/toolbar/enable-tab-key-navigation/index.ts %} +{% endhighlight %} +{% endtabs %} -With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the [`tabIndex`](../api/toolbar/item/#tabindex) values. +{% elsif page.publishingplatform == "javascript" %} -If you set the [`tabIndex`](../api/toolbar/item/#tabindex) value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the [`tabIndex`](../api/toolbar/item/#tabindex) values. For example: +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/toolbar/enable-tab-key-navigation/index.js %} +{% endhighlight %} +{% endtabs %} -```ts -import {Toolbar} from '@syncfusion/ej2-navigations'; +{% endif %} -let toolbar: Toolbar = new Toolbar({ - items: [ - { text: "Item 1", tabIndex: 0 }, - { text: "Item 2", tabIndex: 0 } - ] -}); +With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the [`tabIndex`](../api/toolbar/item#tabindex) values. -``` +If you set the [`tabIndex`](../api/toolbar/item#tabindex) value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the [`tabIndex`](../api/toolbar/item#tabindex) values. For example: + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/toolbar/enable-tab-key-navigation-snippet/index.ts %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/toolbar/enable-tab-key-navigation-snippet/index.js %} +{% endhighlight %} +{% endtabs %} + +{% endif %} In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM. Example: -Here is an example of how you can use the [`tabIndex`](../api/toolbar/item/#tabindex) property to enable tab key navigation for a Toolbar component: +Here is an example of how you can use the [`tabIndex`](../api/toolbar/item#tabindex) property to enable tab key navigation for a Toolbar component: {% if page.publishingplatform == "typescript" %}